<!DOCTYPE html><html lang="en" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>前端总结的一些开发问题 | 孙志豪的博客</title><meta name="author" content="孙志豪"><meta name="copyright" content="孙志豪"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="前端总结的一些问题1.flex:1 代表了什么意思flex: 1的组成：  flex-grow（放大比例，默认为0） flex-shrink（缩小比例，默认为1） flex-basic（flex 元素的内容盒（content-box）的尺寸，默认auto）的缩写；  flex的第三项指的是flex-basis这个属性，这个属性的“0”和“auto”在大多数情况下都会有所不同：  数值被解释为特定">
<meta property="og:type" content="article">
<meta property="og:title" content="前端总结的一些开发问题">
<meta property="og:url" content="https://szhihao.gitee.io/2022/10/11/03-%E5%89%8D%E7%AB%AF%EF%BC%88%E6%A0%B8%E5%BF%83%E9%9D%A2%E8%AF%95%E9%A2%98%EF%BC%89/%E5%89%8D%E7%AB%AF%E6%80%BB%E7%BB%93%E7%9A%84%E4%B8%80%E4%BA%9B%E9%97%AE%E9%A2%98/index.html">
<meta property="og:site_name" content="孙志豪的博客">
<meta property="og:description" content="前端总结的一些问题1.flex:1 代表了什么意思flex: 1的组成：  flex-grow（放大比例，默认为0） flex-shrink（缩小比例，默认为1） flex-basic（flex 元素的内容盒（content-box）的尺寸，默认auto）的缩写；  flex的第三项指的是flex-basis这个属性，这个属性的“0”和“auto”在大多数情况下都会有所不同：  数值被解释为特定">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://szhihao.gitee.io/img/%E5%A4%A9%E7%A9%BA.jpeg">
<meta property="article:published_time" content="2022-10-11T12:01:36.000Z">
<meta property="article:modified_time" content="2022-10-11T10:24:37.399Z">
<meta property="article:author" content="孙志豪">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://szhihao.gitee.io/img/%E5%A4%A9%E7%A9%BA.jpeg"><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="https://szhihao.gitee.io/2022/10/11/03-%E5%89%8D%E7%AB%AF%EF%BC%88%E6%A0%B8%E5%BF%83%E9%9D%A2%E8%AF%95%E9%A2%98%EF%BC%89/%E5%89%8D%E7%AB%AF%E6%80%BB%E7%BB%93%E7%9A%84%E4%B8%80%E4%BA%9B%E9%97%AE%E9%A2%98/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: {"path":"/search.xml","languages":{"hits_empty":"We didn't find any results for the search: ${query}"}},
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: 'Copy successfully',
    error: 'Copy error',
    noSupport: 'The browser does not support'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  date_suffix: {
    just: 'Just',
    min: 'minutes ago',
    hour: 'hours ago',
    day: 'days ago',
    month: 'months ago'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: true,
  isAnchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: '前端总结的一些开发问题',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2022-10-11 18:24:37'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "" data-lazy-src="/img/%E5%A4%B4%E5%83%8F.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">Articles</div><div class="length-num">44</div></a><a href="/tags/"><div class="headline">Tags</div><div class="length-num">1</div></a><a href="/categories/"><div class="headline">Categories</div><div class="length-num">15</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 主页</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fa fa-graduation-cap"></i><span> 博文</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/categories/"><i class="fa-fw fa fa-archive"></i><span> 分类</span></a></li><li><a class="site-page child" href="/tags/"><i class="fa-fw fa fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/archives/"><i class="fa-fw fa fa-folder-open"></i><span> 归档</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 生活</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/photos/"><i class="fa-fw fa fa-camera-retro"></i><span> 相册</span></a></li><li><a class="site-page child" href="/music/"><i class="fa-fw fa fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> 影视</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/links/"><i class="fa-fw fa fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/comment/"><i class="fa-fw fa fa-paper-plane"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于笔者</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('/img/%E5%A4%A9%E7%A9%BA.jpeg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">孙志豪的博客</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> Search</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 主页</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fa fa-graduation-cap"></i><span> 博文</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/categories/"><i class="fa-fw fa fa-archive"></i><span> 分类</span></a></li><li><a class="site-page child" href="/tags/"><i class="fa-fw fa fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/archives/"><i class="fa-fw fa fa-folder-open"></i><span> 归档</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 生活</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/photos/"><i class="fa-fw fa fa-camera-retro"></i><span> 相册</span></a></li><li><a class="site-page child" href="/music/"><i class="fa-fw fa fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> 影视</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/links/"><i class="fa-fw fa fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/comment/"><i class="fa-fw fa fa-paper-plane"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于笔者</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">前端总结的一些开发问题</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">Created</span><time class="post-meta-date-created" datetime="2022-10-11T12:01:36.000Z" title="Created 2022-10-11 20:01:36">2022-10-11</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">Updated</span><time class="post-meta-date-updated" datetime="2022-10-11T10:24:37.399Z" title="Updated 2022-10-11 18:24:37">2022-10-11</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E5%89%8D%E7%AB%AF%EF%BC%88%E6%A0%B8%E5%BF%83%E9%9D%A2%E8%AF%95%E9%A2%98%EF%BC%89/">前端（核心面试题）</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="前端总结的一些开发问题"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">Post View:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><hr>
<h1 id="前端总结的一些问题"><a href="#前端总结的一些问题" class="headerlink" title="前端总结的一些问题"></a>前端总结的一些问题</h1><h2 id="1-flex-1-代表了什么意思"><a href="#1-flex-1-代表了什么意思" class="headerlink" title="1.flex:1 代表了什么意思"></a>1.flex:1 代表了什么意思</h2><p>flex: 1的组成：</p>
<ul>
<li>flex-grow（<strong>放大比例，默认为0</strong>）</li>
<li>flex-shrink（<strong>缩小比例，默认为1</strong>）</li>
<li>flex-basic（<strong>flex 元素的内容盒（content-box）的尺寸，默认auto</strong>）的缩写；</li>
</ul>
<p>flex的第三项指的是<strong>flex-basis</strong>这个属性，这个属性的“0”和“auto”在大多数情况下都会有所不同：</p>
<ul>
<li>数值被解释为特定宽度,因此0将与指定“width：0”相同；</li>
<li>0%就相当于容器内所有项目原本的width不起作用,然后平分宽度；</li>
<li>auto就相当于容器内所有项目原本的width起作用，伸缩空间减去这些width，剩余空间再平分。所以有的情况下auto和0%是相同的</li>
</ul>
<p>2种，flex-basis为0%，覆盖width，实际占用0， flex-basis为auto，width权限更高，占用width的值</p>
<p>所以在下面的情况下</p>
<figure class="highlight plaintext"><figcaption><span>s</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"> .content &#123;</span><br><span class="line">    display: flex;</span><br><span class="line">  &#125;</span><br><span class="line"> .content1&#123;</span><br><span class="line">    flex:1</span><br><span class="line">  &#125;</span><br><span class="line">  </span><br><span class="line">&lt;div class=&quot;content&quot;&gt;</span><br><span class="line">    &lt;div class=&quot;content1&quot; style=&quot;background-color: blue;&quot;&gt;1&lt;/div&gt;</span><br><span class="line">    &lt;div class=&quot;content1&quot; style=&quot;background-color: blueviolet;&quot;&gt;2&lt;/div&gt;</span><br><span class="line">    &lt;div class=&quot;content1&quot; style=&quot;background-color: chartreuse;&quot;&gt;3&lt;/div&gt;</span><br><span class="line">&lt;/div&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>flex: 1 等价于：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="attr">flex</span>: <span class="number">1</span> <span class="number">1</span> <span class="number">0</span>%；</span><br><span class="line">&#125;</span><br><span class="line">&#123;</span><br><span class="line">    <span class="attr">flex</span>: <span class="number">1</span> <span class="number">1</span> <span class="number">0</span>%；</span><br><span class="line">&#125;</span><br><span class="line">&#123;</span><br><span class="line">    flex-<span class="attr">grow</span>: <span class="number">1</span>;</span><br><span class="line">    flex-shrink : <span class="number">1</span>; </span><br><span class="line">    flex-<span class="attr">basis</span>: <span class="number">0</span>%;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="2-单行文本溢出省略号和一个向下的三角形的css怎么写"><a href="#2-单行文本溢出省略号和一个向下的三角形的css怎么写" class="headerlink" title="2.单行文本溢出省略号和一个向下的三角形的css怎么写"></a>2.单行文本溢出省略号和一个向下的三角形的css怎么写</h2><p>单行文本溢出省略号：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    overflow: hidden;            // 溢出隐藏 </span><br><span class="line">    text-overflow: ellipsis;      // 溢出用省略号显示 </span><br><span class="line">    white-space: nowrap;         // 规定段落中的文本不进行换行 </span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>多行文本溢出省略号：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    overflow: hidden;            // 溢出隐藏 </span><br><span class="line">    text-overflow: ellipsis;     // 溢出用省略号显示 </span><br><span class="line">    display:-webkit-box;         // 作为弹性伸缩盒子模型显示。 </span><br><span class="line">    -webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列 </span><br><span class="line">    -webkit-line-clamp:3;        // 显示的行数 </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>向下三角形:</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">div &#123;</span><br><span class="line">    width: 0;</span><br><span class="line">    height: 0;</span><br><span class="line">    border-top: 50px solid red;</span><br><span class="line">    border-right: 50px solid transparent;</span><br><span class="line">    border-left: 50px solid transparent;</span><br><span class="line">&#125;</span><br><span class="line">// 或者</span><br><span class="line">div &#123;</span><br><span class="line">    width: 0;</span><br><span class="line">    height: 0;</span><br><span class="line">    border: 50px solid;</span><br><span class="line">    border-color: red transparent transparent transparent;</span><br><span class="line">&#125;</span><br><span class="line">// 或者</span><br><span class="line">div &#123;</span><br><span class="line">  width: 0;</span><br><span class="line">  height: 0;</span><br><span class="line">  border: 50px solid transparent;</span><br><span class="line">  border-top-color: red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="3-flex布局有哪些常用属性？"><a href="#3-flex布局有哪些常用属性？" class="headerlink" title="3.flex布局有哪些常用属性？"></a>3.flex布局有哪些常用属性？</h2><p>以下6个属性设置在<strong>容器</strong>上：</p>
<ul>
<li><p>flex-direction属性决定主轴的方向（即项目的排列方向）。</p>
</li>
<li><p>flex-wrap属性定义，如果一条轴线排不下，如何换行。</p>
</li>
<li><p>flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。</p>
</li>
<li><p>justify-content属性定义了项目在主轴上的对齐方式。</p>
</li>
<li><p>align-items属性定义项目在交叉轴上如何对齐。</p>
</li>
<li><p>align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。</p>
</li>
</ul>
<p>以下6个属性设置在<strong>子元素</strong>上：</p>
<ul>
<li><p>order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。</p>
</li>
<li><p>flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。</p>
</li>
<li><p>flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。</p>
</li>
<li><p>flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。</p>
</li>
<li><p>flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。</p>
</li>
<li><p>align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。</p>
</li>
</ul>
<h2 id="4-css如何开启硬件加速"><a href="#4-css如何开启硬件加速" class="headerlink" title="4.css如何开启硬件加速"></a>4.css如何开启硬件加速</h2><ul>
<li>动画实现过程中利用transform: translateZ(0)，欺骗浏览器开启GPU加速</li>
<li>will-change开启gpu加速，就是性能不太好</li>
</ul>
<h2 id="5-如何在浏览器画出一个正方形并保证这个正方形是浏览器可视区最大的"><a href="#5-如何在浏览器画出一个正方形并保证这个正方形是浏览器可视区最大的" class="headerlink" title="5.如何在浏览器画出一个正方形并保证这个正方形是浏览器可视区最大的?"></a>5.如何在浏览器画出一个正方形并保证这个正方形是浏览器可视区最大的?</h2><p><strong>（第1种答案）</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">body &#123;</span><br><span class="line">  margin:0;</span><br><span class="line">  padding:0;</span><br><span class="line">&#125;</span><br><span class="line">.box&#123;</span><br><span class="line">  width: 100vmin;</span><br><span class="line">  height:100vmin;</span><br><span class="line">  background-color: #ccc;</span><br><span class="line">  margin:0 auto</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>换一种方式，比如使用padding-top，我们想一下 padding-top的百分比是相对什么来的？— 宽度</p>
<p><strong>（第2种答案）</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div class=&quot;container&quot;&gt;</span><br><span class="line"></span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    </span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;style&gt;</span><br><span class="line"></span><br><span class="line">.container &#123;</span><br><span class="line">    background-color: aqua;</span><br><span class="line">    width: 100vmin;</span><br><span class="line">    padding-top:  100vmin;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">&lt;/style&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div class=&quot;container&quot;&gt;</span><br><span class="line"></span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;style&gt;</span><br><span class="line"></span><br><span class="line">.container &#123;</span><br><span class="line">    background-color: aqua;</span><br><span class="line">    width: 100%;</span><br><span class="line">    padding-top:  100vmin;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>

<p>上面那个写法对吗？</p>
<p>显然是不对的，因为container是用了body的width去做的padding，导致存在滑动效果 所以我们可以在外面再包一层</p>
<p><strong>（第3种答案）</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div class=&quot;container&quot;&gt;</span><br><span class="line">        &lt;div class=&quot;child&quot;&gt;</span><br><span class="line"></span><br><span class="line">        &lt;/div&gt;</span><br><span class="line"></span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    </span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;style&gt;</span><br><span class="line"></span><br><span class="line">.container &#123;</span><br><span class="line">    background-color: aqua;</span><br><span class="line">    width: 100vmin;</span><br><span class="line">&#125;</span><br><span class="line">.child&#123;</span><br><span class="line">    width: 100%;</span><br><span class="line">    padding-top: 100%;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>

<p><strong>（第4种答案）</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">div::before &#123;</span><br><span class="line">  content:&#x27;&#x27;,</span><br><span class="line">  padding-top:100%;</span><br><span class="line">  display:block;</span><br><span class="line">  width:100vmin;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>当然你也可以改成after的写法</p>
<h1 id="2021-11-1"><a href="#2021-11-1" class="headerlink" title="2021.11.1"></a>2021.11.1</h1><h2 id="6-数据检测的方法有哪些"><a href="#6-数据检测的方法有哪些" class="headerlink" title="6.数据检测的方法有哪些"></a>6.数据检测的方法有哪些</h2><p><strong>typeof</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">// 只能检测简单数据类型还有function；不能判断数组和对象</span><br><span class="line">typeof(11) === &#x27;number&#x27;</span><br><span class="line">typeof(function()&#123;&#125;) === &#x27;function&#x27;</span><br></pre></td></tr></table></figure>

<p><strong>instanceof</strong></p>
<p>用法：判断实例 instanceof 构造函数</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">// 原理：判断在其原型链中能否找到该类型的原型</span><br><span class="line"></span><br><span class="line">// 简单数据类型检测不出来，会false</span><br><span class="line">console.log(2 instanceof Number); // false </span><br><span class="line">console.log(true instanceof Boolean); // false</span><br><span class="line"></span><br><span class="line">// 可以用来判断复杂数据类型</span><br><span class="line">console.log([] instanceof Array); // true </span><br><span class="line">console.log([] instanceof Object) // true </span><br><span class="line">console.log(&#123;&#125; instanceof Object); // true </span><br><span class="line">console.log(function()&#123;&#125; instanceof Function); // true</span><br></pre></td></tr></table></figure>

<p><strong>constructor</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">// 虽然简单和复杂数据类型都能判断，但是！ 构造函数可以被手动改变，所以也不是百分之百准确</span><br><span class="line">console.log((2).constructor === Number); // true </span><br><span class="line">console.log((true).constructor === Boolean); // true </span><br><span class="line">console.log((&#x27;str&#x27;).constructor === String); // true </span><br><span class="line">console.log(([]).constructor === Array); // true </span><br><span class="line">console.log((function() &#123;&#125;).constructor === Function); // true console.log((&#123;&#125;).constructor === Object); // true</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p><strong>Object.prototype.toString.bind()</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">var testMethods = Object.prototype.toString; </span><br><span class="line">console.log(testMethods.call(2)); // [object Number] </span><br><span class="line">console.log(testMethods.call(true)); // [object Boolean] </span><br><span class="line">console.log(testMethods.call(&#x27;str&#x27;)); // [object String]</span><br><span class="line"></span><br><span class="line">// 实现原理：</span><br><span class="line">// 先判断参数是否是null或者undefined，是的话直接返回结果；</span><br><span class="line">// 否则将参数转为对象，取得该对象的 [Symbol.toStringTag] 属性值（可能会遍历原型链）取得 tag, 然后返回 &quot;[object &quot; + tag + &quot;]&quot; 形式的字符串。</span><br></pre></td></tr></table></figure>

<h2 id="7-如何实现bind"><a href="#7-如何实现bind" class="headerlink" title="7.如何实现bind"></a>7.如何实现bind</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 模拟bind 自己手写bind函数，可以在原型上增加这个方法</span></span><br><span class="line"><span class="title class_">Function</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">myBind</span> = <span class="keyword">function</span> (<span class="params">context</span>) &#123;</span><br><span class="line">    <span class="comment">// 如果调用bind方法的对象不是函数的话返回出去</span></span><br><span class="line">    <span class="keyword">if</span> (<span class="title function_">typeof</span>(<span class="variable language_">this</span>) !== <span class="string">&#x27;function&#x27;</span>) &#123;</span><br><span class="line">        <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">TypeError</span>(<span class="string">&#x27;类型错误&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 把对象转成数组，且把参数截出来存入args中</span></span><br><span class="line">    <span class="keyword">var</span> args = [...<span class="variable language_">arguments</span>].<span class="title function_">slice</span>(<span class="number">1</span>)</span><br><span class="line">    <span class="keyword">var</span> self = <span class="variable language_">this</span>  <span class="comment">// 把调用bind的函数存起来</span></span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">function</span> <span class="title function_">Fn</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="comment">//  new的话this指向新创建的实例this；普通调用的this指向新bind的第一个参数context</span></span><br><span class="line">        <span class="keyword">return</span> self.<span class="title function_">apply</span>(<span class="variable language_">this</span> <span class="keyword">instanceof</span> <span class="title class_">Fn</span> ? <span class="variable language_">this</span> : context, args.<span class="title function_">concat</span>(...<span class="variable language_">arguments</span>))</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 使用</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fn1</span> (a, b, c)&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;this&#x27;</span>, <span class="variable language_">this</span>, a, b, c) <span class="comment">// this &#123;x: 100&#125; 10 20 30</span></span><br><span class="line">    <span class="keyword">return</span> <span class="string">&#x27;this is fn1&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> fn2 = fn1.<span class="title function_">myBind</span>(&#123;<span class="attr">x</span>:<span class="number">100</span>&#125;,<span class="number">10</span>,<span class="number">20</span>,<span class="number">30</span>) </span><br><span class="line"><span class="keyword">const</span> res = <span class="title function_">fn2</span>()</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;fn2&#x27;</span>, fn2, res) <span class="comment">// fn2返回一个函数</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h2 id="8-mouseover和mouseenter的区别"><a href="#8-mouseover和mouseenter的区别" class="headerlink" title="8.mouseover和mouseenter的区别"></a>8.mouseover和mouseenter的区别</h2><p>二者的<strong>本质区别</strong>：mouseenter不会冒泡,简单的说,它不会被它本身的子元素的状态影响到.但是mouseover就会被它的子元素影响到,在触发子元素的时候,mouseover会冒泡触发它的父元素.(想要阻止mouseover的冒泡事件就用mouseenter)</p>
<p><strong>共同点</strong>:当二者都没有子元素时,二者的行为是一致的,但是二者内部都包含子元素时,行为就不同了.</p>
<h2 id="9-JS垃圾回收机制"><a href="#9-JS垃圾回收机制" class="headerlink" title="9.JS垃圾回收机制"></a>9.JS垃圾回收机制</h2><p><strong>垃圾回收机制</strong>：Javascript 具有自动垃圾回收机制，会定期对那些不再使用的变量、对象所占用的内存进行释放，原理就是<strong>找到不再使用的变量，然后释放掉其占用的内存</strong></p>
<p>浏览器通常使用的垃圾回收方法有两种：<strong>标记清除，引用计数</strong>。</p>
<p><strong>标记清除：</strong> 当变量进入执行环境时，就标记这个变量“进入环境”， 变量离开环境时，就会被标记为“离开环境”，被标记为“离开环境”的变量会被内存释放。</p>
<p><strong>引用计数：</strong> 跟踪记录每个值被引用的次数。当一个新的引用指向对象时，引用计数器就递增+1，当去掉一个引用时，引用计数就递减-1。当引用计数到0时，该对象就将释放占有的资源。</p>
<p>详解可移步至<a target="_blank" rel="noopener" href="https://juejin.cn/post/6981588276356317214">juejin.cn&#x2F;post&#x2F;698158…</a></p>
<h1 id="2021-11-2"><a href="#2021-11-2" class="headerlink" title="2021.11.2"></a>2021.11.2</h1><h2 id="10-组合继承的缺点，寄生继承的缺点"><a href="#10-组合继承的缺点，寄生继承的缺点" class="headerlink" title="10.组合继承的缺点，寄生继承的缺点"></a>10.组合继承的缺点，寄生继承的缺点</h2><p>组合继承：由于我们是以父级的实例来作为子类型的原型，所以调用了两次超类的构造函数，造成了子类型的原型中多了很多不必要的属性。导致原型对象被父类实例属性污染，出现属性冗余问题</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">function Father(name)&#123;</span><br><span class="line">  this.name = name</span><br><span class="line">&#125;</span><br><span class="line">Father.prototype.say = function()&#123;</span><br><span class="line">  console.log(`hello大家好，我是$&#123;this.name&#125;今年$&#123;this.age&#125;岁了`)</span><br><span class="line">&#125;</span><br><span class="line">function Son(name ,age)&#123;</span><br><span class="line">  this.age = age</span><br><span class="line">  Father.call(this, name)</span><br><span class="line">&#125;</span><br><span class="line">Son.prototype = new Father // 将父子方法建立关系，为了复用prototype属性</span><br><span class="line"></span><br><span class="line">var xrr = new Son(&#x27;小熔熔&#x27;, &#x27;12&#x27;)</span><br><span class="line">xrr.say()</span><br></pre></td></tr></table></figure>

<p>寄生继承：没有盗用父类的构造函数，而只能够继承原型中方法，所以没有办法实现函数的复用。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">function People(obj)&#123;</span><br><span class="line">  function F()&#123;&#125;</span><br><span class="line">  F.prototype = obj</span><br><span class="line">  return new F()</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function Student(obj)&#123;</span><br><span class="line">  var clone = People(obj) // 通过调用函数创建一个新对象</span><br><span class="line">  clone.__proto__.long = &#x27;12cm&#x27;</span><br><span class="line">  clone.__proto__.getAA =  function () &#123;</span><br><span class="line">        console.log(&#x27;aaaa&#x27;)</span><br><span class="line">  &#125;</span><br><span class="line">  clone.say = function()&#123;</span><br><span class="line">    console.log(`hello大家好，我是$&#123;this.name&#125;今年$&#123;this.age&#125;岁了`)</span><br><span class="line">  &#125;</span><br><span class="line">  return clone</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">var obj = &#123;</span><br><span class="line">  name:&#x27;小熔熔&#x27;,</span><br><span class="line">  age:&#x27;12&#x27;</span><br><span class="line">&#125;</span><br><span class="line">var xrr = Student(obj)</span><br><span class="line">xrr.say()</span><br></pre></td></tr></table></figure>

<p>解决方案：使用组合寄生继承</p>
<h2 id="11-function构造函数和Class的差别"><a href="#11-function构造函数和Class的差别" class="headerlink" title="11.function构造函数和Class的差别"></a>11.function构造函数和Class的差别</h2><p>class事实上是一种特殊的funcion，就像可以定义funcion表达式和funcion声明一样，class语法也有2种形式：class表达式和class声明</p>
<ol>
<li><p>Function构造函数：可以实例化函数对象，function声明会变量提升。</p>
</li>
<li><p>Class:ES6中的构造语法——Class，在语法上更贴合面向对象的写法。实现继承更加易读、易理解。更易于写java等后端语言的使用。本质是语法糖，使用prototyp。不会变量提升，需要先声明再使用</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">class的body部分包含在花括号&#123;&#125;中</span><br><span class="line">constructor，constructor中可以通过super关键字，调用父类的constructor方法</span><br><span class="line">通过static关键字为一个class创建静态方法</span><br><span class="line">extends关键字用于在class声明或表达式中，创建另一个class的子类。</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure></li>
</ol>
<h2 id="12-怎么计算元素ele到浏览器视口顶部的距离"><a href="#12-怎么计算元素ele到浏览器视口顶部的距离" class="headerlink" title="12.怎么计算元素ele到浏览器视口顶部的距离"></a>12.怎么计算元素ele到浏览器视口顶部的距离</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> sum = <span class="number">0</span></span><br><span class="line"><span class="keyword">let</span> ele = xxx; <span class="comment">// 要求距离的元素</span></span><br><span class="line"><span class="keyword">while</span>(ele.<span class="property">offsetParent</span>) &#123;</span><br><span class="line">	sum += ele.<span class="property">offsetTop</span>; <span class="comment">// 统计当前到其有定位元素的距离</span></span><br><span class="line">	ele = ele.<span class="property">offsetParent</span>; <span class="comment">// 将父设为当前继续求距离</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 输出到视口顶部距离</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(sum)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h2 id="13-说说prop和attribute的差别"><a href="#13-说说prop和attribute的差别" class="headerlink" title="13.说说prop和attribute的差别"></a>13.说说prop和attribute的差别</h2><ul>
<li>property是js原生对象的直接属性，是 dom 元素在 js 中作为对象拥有的属性。</li>
<li>attribute：是 dom 元素在文档中作为 html 标签拥有的性，它的值只能够是字符串，attributes是属于property的一个子集</li>
</ul>
<p>对于 html 的标准属性来说，attribute 和 property 是同步的，是会自动更新的， 但是对于自定义的属性来说，他们是不同步的。</p>
<h2 id="14-事件冒泡和捕获的区别？"><a href="#14-事件冒泡和捕获的区别？" class="headerlink" title="14.事件冒泡和捕获的区别？"></a>14.事件冒泡和捕获的区别？</h2><p>捕获阶段 -&gt; 目标阶段 -&gt; 冒泡阶段</p>
<p>比如点击了某个input框，从window 到 body 是捕获阶段（捕获从外向里），到input是目标阶段(到达目标阶段)，再到body到window是冒泡阶段(冒泡从里向外);ie规定先让他冒泡，addEventListener 第三个参数就代表的是冒泡还是捕获，默认是false代表默认冒泡</p>
<h1 id="2021-11-3"><a href="#2021-11-3" class="headerlink" title="2021.11.3"></a>2021.11.3</h1><h2 id="15-Cookie有哪些属性"><a href="#15-Cookie有哪些属性" class="headerlink" title="15. Cookie有哪些属性?"></a>15. Cookie有哪些属性?</h2><p><strong>(1)cookie内包含</strong></p>
<ol>
<li><p>name：名称</p>
</li>
<li><p>value：值</p>
</li>
<li><p>domain:域名</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">有特定场景下会使用到domain，比如顶级域名和子级域名之间的cookie共享和相互修改、删除，会用到domain</span><br><span class="line"></span><br></pre></td></tr></table></figure>
</li>
<li><p>path：访问此cookie的页面路径</p>
</li>
<li><p>expires&#x2F;Max-Age:cookie超时时间</p>
</li>
<li><p>size:大小</p>
</li>
<li><p>http：cookie的httpOnly属性</p>
</li>
<li><p>secure</p>
</li>
<li><p>same-site等等</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">cookie的httpOnly是安全相关，cors要求cookie传输的时候httpOnly不能为none</span><br><span class="line"></span><br></pre></td></tr></table></figure></li>
</ol>
<p><strong>(2)发送请求的时候会携带cookie吗</strong></p>
<p>axios&#x2F;ajax默认是发送请求的时候不会带上cookie的，需要在请求头上设置withCredentials: true来解决；</p>
<p>同时后端要配合设置：</p>
<ul>
<li>header 信息 Access-Control-Allow-Credentials: true</li>
<li>Access-Control-Allow-Origin不可以为 ‘*’，因为会和 Access-Control-Allow-Credentials: true 冲突，需配置指定的地址</li>
<li>设置httponly，一般值都是httponly，要设置为same-site</li>
</ul>
<p><strong>(3)关掉页面对cookie有影响吗？</strong></p>
<p>cookie的生命期为浏览器会话期间，关闭浏览器窗口，cookie就消失。</p>
<p>没有设置cookie生命周期的话，cookie 的生命周期是累計的，从创建开始计时，20mins后cookie的生命周期結束，cookie就無效了； 一般保存在内存里，如果设置了过期时间，浏览器就会把cookie保存到硬盘上，关闭后再次打开浏览器，这些cookie依然有效直到超过设定的过期时间。</p>
<h2 id="16-说明EventTarget-addEventListener-的第三个参数"><a href="#16-说明EventTarget-addEventListener-的第三个参数" class="headerlink" title="16. 说明EventTarget.addEventListener() 的第三个参数"></a>16. 说明EventTarget.addEventListener() 的第三个参数</h2><p>第三个参数true为捕获，默认false 是冒泡；</p>
<p>新语法：第三个参数可为 Boolean，也可为 Object;</p>
<ul>
<li>options (可选)<ol>
<li>capture 表示listener会在该类型的事件捕获阶段传播到该EventTarget 时触发。</li>
<li>once 表示listener在添加以后最多只调用一次。若是是 true，listener会在其被调用以后自动移除。</li>
<li>passive 表示listener永远不会调用preventDefault()。若是listener仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告。</li>
</ol>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">target.addEventListener(type, listener, true/false)</span><br><span class="line">target.addEventListener(type, listener, options)</span><br></pre></td></tr></table></figure>

<h2 id="17-Object-freeze-是做什么用的，有哪些应用场景"><a href="#17-Object-freeze-是做什么用的，有哪些应用场景" class="headerlink" title="17. Object.freeze() 是做什么用的，有哪些应用场景"></a>17. Object.freeze() 是做什么用的，有哪些应用场景</h2><p>1.Object.freeze()是ES5新增的特性，可以冻结一个对象，冻结指的是不能向这个对象添加新的属性，不能修改其已有属性的值，不能删除已有属性，以及不能修改该对象已有属性的可枚举性、可配置性、可写性。防止对象被修改，但不能防止被修改引用。如果你有一个巨大的数组或Object，并且确信数据不会修改，使用Object.freeze()可以让性能大幅提升，多用于展示。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">// 为了不让obj中的键对应的值被修改可以使用；Object.freeze(obj)</span><br><span class="line">const obj = &#123; a: &#x27;1&#x27;, b: &#x27;2&#x27; &#125;</span><br></pre></td></tr></table></figure>

<ol>
<li>freeze可以用来实现const；</li>
<li>只是浅冻结：复合类型的对象不能freeze比如 const obj &#x3D; { arg: [1, 2, 3] }，这个arg是冻不了的；</li>
<li>就是要冻它，只能遍历逐层freeze</li>
<li>object.freeze这个可以不让vue去添加响应</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">// 深层冻结ultil：</span><br><span class="line">function deepFreeze(obj = &#123;&#125;) &#123;</span><br><span class="line">  Object.freeze(obj);</span><br><span class="line">  (Object.keys(obj) || []).forEach(key =&gt; &#123;</span><br><span class="line">    if (typeof obj[key] === &#x27;object&#x27;) &#123;</span><br><span class="line">      deepFreeze(obj[key])</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>6.reduce可以实现深层冻结一行搞定</p>
<h2 id="18-点击移动端浏览器的前进按钮或后退按钮，往返页面不刷新，可以如何解决"><a href="#18-点击移动端浏览器的前进按钮或后退按钮，往返页面不刷新，可以如何解决" class="headerlink" title="18. 点击移动端浏览器的前进按钮或后退按钮，往返页面不刷新，可以如何解决"></a>18. 点击移动端浏览器的前进按钮或后退按钮，往返页面不刷新，可以如何解决</h2><p><strong>往返缓存</strong>指浏览器为了在页面间执行前进后退操作时能拥有更流畅体验的一种策略。</p>
<p>该策略<strong>具体表现</strong>为：当用户前往新页面前将旧页面的DOM状态保存在缓存里，当用户返回旧页面前将旧页面的DOM状态从缓存里取出并加载。大部分移动端浏览器都会部署缓存，可大大节省接口请求的时间和带宽。</p>
<p>解决方案：</p>
<p><strong>1. onunload</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">// 在新页面监听页面销毁事件</span><br><span class="line">window.addEventListener(&quot;onunload&quot;, () =&gt; &#123;</span><br><span class="line">    // 执行旧页面代码</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p><strong>2. beforeRouteEnter</strong> 若在Vue中使用了keep-alive，可将接口请求放到beforeRouteEnter()里。</p>
<p><strong>3. 监听pageshow事件</strong> pageshow事件在每次页面加载时都会触发，无论是首次加载还是再次加载都会触发，这就是它与load事件的区别。 pageshow事件暴露的persisted可判断页面是否从缓存里取出。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">window.addEventListener(&quot;pageshow&quot;, e =&gt; e.persisted &amp;&amp; location.reload());</span><br></pre></td></tr></table></figure>

<p>如果e.persisted依然是false，可以观察performance对象</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">window.addEventListener(&#x27;pageshow&#x27;, () =&gt; &#123; </span><br><span class="line">if (e.persisted || (window.performance &amp;&amp; window.performance.navigation.type == 2)) &#123; </span><br><span class="line">    location.reload() </span><br><span class="line">&#125; &#125;, false)</span><br><span class="line">performance.navigation.type是一个无符号短整型</span><br><span class="line"></span><br><span class="line">TYPE_NAVIGATE (0)： </span><br><span class="line">当前页面是通过点击链接，书签和表单提交，或者脚本操作，或者在url中直接输入地址，type值为0</span><br><span class="line"></span><br><span class="line">TYPE_RELOAD (1) </span><br><span class="line">点击刷新页面按钮或者通过Location.reload()方法显示的页面，type值为1</span><br><span class="line"></span><br><span class="line">TYPE_BACK_FORWARD (2) </span><br><span class="line">页面通过历史记录和前进后退访问时。type值为2</span><br><span class="line"></span><br><span class="line">TYPE_RESERVED (255) </span><br><span class="line">任何其他方式，type值为255</span><br></pre></td></tr></table></figure>

<p><strong>4. 禁用缓存</strong></p>
<p><strong>5. history</strong>，通过路由就可以前进后退不刷新，history路由变化就是pushstate 和popstate，通过popState事件还能监听到history，用来在点击按钮后进行操作加强。</p>
<h1 id="2021-11-4"><a href="#2021-11-4" class="headerlink" title="2021.11.4"></a>2021.11.4</h1><h2 id="19-new做了什么"><a href="#19-new做了什么" class="headerlink" title="19. new做了什么"></a>19. new做了什么</h2><p>（1）创建了一个新的空对象</p>
<p>（2）设置原型：将对象的__proto__设置为函数的 prototype 对象。</p>
<p>（3）执行构造函数的代码，让函数的 <strong>this</strong> 指向这个新对象（为这个新对象添加属性方法）</p>
<p>（4）判断函数的返回值<strong>类型</strong>，如果是值类型，返回创建的对象。如果是引用类型，就返回这个引用类型的对象。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">function objectFactory()&#123;</span><br><span class="line">    // 把数组的第一个元素从其中删除,并返回第一个元素的值=&gt;第一个为构造函数后面的为参数</span><br><span class="line">    let constructor = Array.prototype.shift.call(arguments)</span><br><span class="line">    // 限定第一个参数必须为构造函数</span><br><span class="line">    if (typeof constructor !== &quot;function&quot;) &#123;</span><br><span class="line">        console.error(&quot;第一个参数应为函数&quot;)</span><br><span class="line">        return</span><br><span class="line">    &#125;</span><br><span class="line">    // 创建一个空对象</span><br><span class="line">    let newObject = null</span><br><span class="line">    </span><br><span class="line">    // 将构造函数的prototype赋给新对象的__proto__</span><br><span class="line">    newObject = Object.create(constructor.prototype)</span><br><span class="line">    </span><br><span class="line">    // 相当于newObject.constructor(arguments)</span><br><span class="line">    let result = null // 将this指向新对象，执行构造函数，将属性方法赋值给添加到这个新对象里</span><br><span class="line">    result = constructor.apply(newObject, arguments)</span><br><span class="line">    </span><br><span class="line">    // 判断返回的类型-对象或者函数</span><br><span class="line">    let flag = result &amp;&amp; (typeof result === &quot;object&quot; || typeof result === &quot;function&quot;)</span><br><span class="line">    </span><br><span class="line">    // 如果是函数或者对象则返回结果，否则返回构造函数</span><br><span class="line">    return flag ? result : newObject</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">// 使用方法</span><br><span class="line">objectFactory(构造函数, 初始化参数);</span><br><span class="line">let a = objectFactory(Array, &#x27;111&#x27;, &#x27;2222&#x27;)</span><br><span class="line">console.log(a, &#x27;aa&#x27;) //  [&quot;111&quot;, &quot;2222&quot;] &quot;aa&quot;</span><br></pre></td></tr></table></figure>

<h2 id="20-通过原型实现的继承和类继承有什么区别"><a href="#20-通过原型实现的继承和类继承有什么区别" class="headerlink" title="20.通过原型实现的继承和类继承有什么区别"></a>20.通过原型实现的继承和类继承有什么区别</h2><ul>
<li><p>原型继承：以原型链的方式来实现继承，缺点：在包含有引用类型的数据时，会被所有的实例对象所共享，容易造成修改的混乱；还有就是在创建子类型的时候不能父级传递参。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">function Father()&#123;</span><br><span class="line">      this.FatherName = &quot;father&#x27;s 构造函数&quot;;</span><br><span class="line"> &#125;</span><br><span class="line">Father.prototype.age = 12;</span><br><span class="line">function Son()&#123;</span><br><span class="line">      this.SonNname = &quot;Son&#x27;s 构造函数&quot;;</span><br><span class="line">&#125;</span><br><span class="line">//Son的原型继承Father创建出来的对象，相当于继承了Father的全部内容，同时全部都存在Son__proto__属性里</span><br><span class="line">Son.prototype = new Father();</span><br><span class="line"></span><br><span class="line">var xrr = new Son();</span><br><span class="line">console.log(xrr.age);</span><br><span class="line"></span><br></pre></td></tr></table></figure>
</li>
<li><p>类式继承（构造函数）：JS中其实是没有类的概念的，所谓的类也是模拟出来的。通过在子类型的函数中调用父级的构造函数来实现，这一种方法解决了不能向父级传递参数的缺点；缺点：无法实现函数方法的复用（只能复用father里 this.name &#x3D; name的这种，无法复用father.prototype.a ），并且父级原型定义的方法子类型也没有办法访问到（都没有用到原型继承当然就访问不到原型定义的方法）</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">function Father(name)&#123;</span><br><span class="line">        this.name = name</span><br><span class="line">&#125;</span><br><span class="line">function Son(name, age)&#123;</span><br><span class="line">  this.age = age</span><br><span class="line">        Father.call(this, name)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">var xrr = new Son(&#x27;小熔熔&#x27;, &#x27;12&#x27;)</span><br><span class="line">console.log(xrr.age, xrr.name)</span><br><span class="line"></span><br></pre></td></tr></table></figure>
</li>
<li><p>class继承：class以及extends其实是寄生组合继承的语法糖，新的class写法只是让对象原型的写法更加清晰，更加面向对象编程的语法而已。子类在构造函数中必须调用super方法，这个super指的是父类的构造函数，从而获取到父类实例，在组合继承里父类需要将this指向子类的实例需要用parent.call(this, …arguments)。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line">// 父类</span><br><span class="line">class People &#123;</span><br><span class="line">    constructor(name)&#123;</span><br><span class="line">        this.name = name</span><br><span class="line">    &#125;</span><br><span class="line">    eat()&#123;</span><br><span class="line">        console.log(`$&#123;this.name&#125;是一个妹子`)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">// 子类 继承的话要记得在constructor内super</span><br><span class="line">class Student extends People &#123;</span><br><span class="line">    constructor(name,number)&#123;</span><br><span class="line">        super(name)</span><br><span class="line">        this.number = number</span><br><span class="line">    &#125;</span><br><span class="line">    sayHi()&#123;</span><br><span class="line">        console.log(`姓名$&#123;this.name&#125;妹子还对你招了手$&#123;this.number&#125;`)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">// 再写一个继承People的子类</span><br><span class="line">class Teacher extends People &#123;</span><br><span class="line">    constructor（name,major） &#123;</span><br><span class="line">        super(name)</span><br><span class="line">        this.major = major</span><br><span class="line">    &#125;</span><br><span class="line">    teacher()&#123;</span><br><span class="line">        console.log(`$&#123;this.name&#125;教授$&#123;this.major&#125;`)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">// 实例</span><br><span class="line">const xrr = new Student(&#x27;小熔熔&#x27;, 100)</span><br><span class="line">console.log(xrr.name) //小熔熔</span><br><span class="line">console.log(xrr.Siholll)//undefined</span><br><span class="line">xrr.sayHi() </span><br><span class="line">xrr.eat()</span><br><span class="line">xrr instanceof Student // true</span><br><span class="line">xrr instanceof People // true</span><br><span class="line"></span><br><span class="line">// 了解this指向后补充一下</span><br><span class="line">xrr._proto_.sayHi()  // 姓名undfined妹子还对你招了手undfined</span><br><span class="line">// 这里undefined其实是因为xrr._proto_调用了sayHi()方法，this指向的是xrr._proto_</span><br><span class="line"></span><br><span class="line">// xrr.sayHi()  其实相当于xrr._proto_.sayHi.call(xrr) ，但内部不是这样执行的</span><br><span class="line"></span><br></pre></td></tr></table></figure></li>
</ul>
<h2 id="21-window-onload和domcontentloaded的区别"><a href="#21-window-onload和domcontentloaded的区别" class="headerlink" title="21. window.onload和domcontentloaded的区别"></a>21. window.onload和domcontentloaded的区别</h2><p><strong>window.addEventListener（’load’,function(){…….}）</strong>：页面全部资源加载完才会执行</p>
<p><strong>ducument.addEventListener（’DOMContentLoaded’,function(){…….}）</strong>：DOM渲染完可执行；通常用这个</p>
<h1 id="2021-11-5"><a href="#2021-11-5" class="headerlink" title="2021.11.5"></a>2021.11.5</h1><h2 id="22-什么是BFC-如何形成BFC"><a href="#22-什么是BFC-如何形成BFC" class="headerlink" title="22.什么是BFC,如何形成BFC"></a>22.什么是BFC,如何形成BFC</h2><p><strong>BFC:</strong> 块级格式化上下文.通俗的说就是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。</p>
<p>如何形成BFC：（float不是none，position是absolute和fixed，overflow不是visible）</p>
<ul>
<li>overflow: hidden</li>
<li>display: inline-block</li>
<li>position: absolute</li>
<li>position: fixed</li>
<li>display: table-cell</li>
<li>display: flex</li>
</ul>
<p>解决了什么问题：</p>
<ol>
<li>使用Float脱离文档流，高度塌陷</li>
<li>Margin边距重叠</li>
<li>两栏布局，Float脱离文档后文字环绕问题</li>
</ol>
<h2 id="23-你知道的浅拷贝有哪些？"><a href="#23-你知道的浅拷贝有哪些？" class="headerlink" title="23.你知道的浅拷贝有哪些？"></a>23.你知道的浅拷贝有哪些？</h2><ol>
<li>object.assign</li>
<li>扩展运算符方式（…）</li>
<li>concat 拷贝数组</li>
<li>slice&#x2F;concat 拷贝数组</li>
<li>lodash函数库</li>
<li>for单层循环</li>
</ol>
<h2 id="24-说说Object-assign和扩展运算符的区别"><a href="#24-说说Object-assign和扩展运算符的区别" class="headerlink" title="24.说说Object.assign和扩展运算符的区别"></a>24.说说Object.assign和扩展运算符的区别</h2><ul>
<li>Object.assign()方法接收的第一个参数作为目标对象，后面的所有参数作为源对象。然后把所有的源对象合并到目标对象中。它会修改了一个对象，因此会触发 ES6 setter。</li>
<li>扩展操作符（…）使用它时，数组或对象中的每一个值都会被拷贝到一个新的数组或对象中。它不复制继承的属性或类的属性，但是它会复制ES6的 symbols 属性。</li>
</ul>
<h2 id="25-你知道的深拷贝有哪些？-让你实现，你会怎么设计"><a href="#25-你知道的深拷贝有哪些？-让你实现，你会怎么设计" class="headerlink" title="25.你知道的深拷贝有哪些？(让你实现，你会怎么设计)"></a>25.你知道的深拷贝有哪些？(让你实现，你会怎么设计)</h2><ol>
<li>JSON.parse(JSON.stringify())</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">缺陷：</span><br><span class="line">    会忽略 undefined</span><br><span class="line">    会忽略 symbol</span><br><span class="line">    不能序列化函数</span><br><span class="line">    无法拷贝不可枚举的属性</span><br><span class="line">    无法拷贝对象的原型链</span><br><span class="line">    拷贝 RegExp 引用类型会变成空对象</span><br><span class="line">    拷贝 Date 引用类型会变成字符串</span><br><span class="line">    对象中含有 NaN、Infinity 以及 -Infinity，JSON 序列化的结果会变成 null</span><br><span class="line">    不能解决循环引用的对象，即对象成环 (obj[key] = obj)。</span><br><span class="line">    </span><br></pre></td></tr></table></figure>

<ol>
<li>自己设计深拷贝函数</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">自己设计思路：</span><br><span class="line">【基础版】递归实现，通过 for in 遍历传入参数的属性值，如果值是引用类型则再次递归调用该函数，如果是基础数据类型就直接复制。</span><br><span class="line">【考虑的点】</span><br><span class="line">1.递归 （存在问题，不够健壮）</span><br><span class="line">2.需考虑数组 （问题是只考虑了普通的object，没有考虑数组的话会有问题）</span><br><span class="line">3.循环引用（如果递归进入死循环会导致栈内存溢出了）</span><br><span class="line">4.性能优化（历数组和对象都使用了for in这种方式，实际上for in在遍历时效率是非常低的）</span><br><span class="line">5.其他数据类型（只考虑了普通的object和array两种数据类型，实际上所有的引用类型不止这两个，就需要精确判断引用类型）</span><br><span class="line">【存在问题】：</span><br><span class="line">1.简单的递归实现深拷贝的函数并不能复制不可枚举的属性以及 Symbol 类型；</span><br><span class="line">2.这种方法只是针对普通的引用类型的值做递归复制，而对于 Array、Date、RegExp、Error、Function 这样的引用类型并不能正确地拷贝；</span><br><span class="line">3.对象的属性里面成环，即循环引用没有解决。</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h2 id="26-Promise执行过程中可以中断吗？若想中断，怎么对其进行中断。"><a href="#26-Promise执行过程中可以中断吗？若想中断，怎么对其进行中断。" class="headerlink" title="26.Promise执行过程中可以中断吗？若想中断，怎么对其进行中断。"></a>26.Promise执行过程中可以中断吗？若想中断，怎么对其进行中断。</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">Promise执行是不可以中断的。但实际需求中会出现一种场景，就是在合适的时候，把pending状态的promise给reject掉。例如把网络请求设置超时时间，一旦超时就中断。</span><br><span class="line">这里用定时器模拟一个网络请求，</span><br><span class="line">function timeoutWrapper(p,timeout =2000)&#123;</span><br><span class="line">     const wait = new Prkmise(ersolve,reject)&#123;</span><br><span class="line">        setTimeout(()=&gt;&#123;</span><br><span class="line"></span><br><span class="line">          reject(&#x27;请求超时&#x27;)</span><br><span class="line">          </span><br><span class="line">       &#125;，timeout)</span><br><span class="line">    &#125;</span><br><span class="line">    return Promise.race([p,wait])</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h1 id="2021-11-8"><a href="#2021-11-8" class="headerlink" title="2021.11.8"></a>2021.11.8</h1><h2 id="27-event-loop-执行过程"><a href="#27-event-loop-执行过程" class="headerlink" title="27.event loop 执行过程"></a>27.event loop 执行过程</h2><p>事件循环从宏任务队列开始，一开始宏任务队列中只有一个script（整体代码）任务，遇到任务源时，分发到相应的任务队列中。异步任务可分为task 和 microtask 两类(requestAnimationFrame 既不属于 macrotask, 也不属于 microtask)，不同的API注册的异步任务会依次进入自身对应的队列中，然后等待 Event Loop 将它们依次压入执行栈中执行。执行栈在执行完同步任务后，检查执行栈是否为空，如果为空，检查微任务队列是否为空，如果微任务队列不为空，则一次性执行完所有的微任务。如果微任务为空，则去执行下一个宏任务。每次单个的宏任务执行完之后，都会检查微任务队列是否为空，如果不为空，则按照先进先出的方式执行完所有的微任务，然后执行下一个宏任务，以此循环。每次执行宏任务 产生的微任务队列都是新创建的 宏任务队列只有一个。</p>
<p><img src= "" data-lazy-src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ca682aa179ed4de88d6043f4cd28533b~tplv-k3u1fbpfcp-watermark.awebp" alt="image.png"></p>
<p><img src= "" data-lazy-src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b493b37d5ae84910b8cdd5b6dc41b583~tplv-k3u1fbpfcp-watermark.awebp" alt="image.png"></p>
<h2 id="28-数组去重的方式"><a href="#28-数组去重的方式" class="headerlink" title="28.数组去重的方式"></a>28.数组去重的方式</h2><ol>
<li><p>Set,</p>
</li>
<li><p>filter,</p>
</li>
<li><p>双层for循环然后splice去重,</p>
</li>
<li><p>indexof去重,</p>
</li>
<li><p>sort,</p>
</li>
<li><p>includes,</p>
</li>
<li><p>hasOwnProperty（利用hasOwnProperty 判断是否存在对象属性）</p>
</li>
<li><p>map,</p>
</li>
<li><p>[…new Set(arr)]</p>
</li>
<li><p>Array.from(new Set(arr))</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">function unique(arr) &#123;</span><br><span class="line">    var obj = &#123;&#125;;</span><br><span class="line">    return arr.filter(function(item, index, arr)&#123;</span><br><span class="line">        return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line">var arr = [1,1,&#x27;true&#x27;,&#x27;true&#x27;,true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,&#x27;NaN&#x27;, 0, 0, &#x27;a&#x27;, &#x27;a&#x27;,&#123;&#125;,&#123;&#125;];</span><br><span class="line">console.log(unique(arr))</span><br><span class="line">//[1, &quot;true&quot;, true, 15, false, undefined, null, NaN, &quot;NaN&quot;, 0, &quot;a&quot;, &#123;…&#125;]   //所有的都去重了</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure></li>
</ol>
<h2 id="29-set和map的区别"><a href="#29-set和map的区别" class="headerlink" title="29.set和map的区别"></a>29.set和map的区别</h2><p><strong>set不允许元素重复</strong></p>
<p>属性和方法：</p>
<ul>
<li>size-获取元素数量；</li>
<li>add(value)-添加元素，返回set实例本身；</li>
<li>delete(value)-删除元素返回一个布尔值；</li>
<li>has(value)-返回布尔值，表示该值是否是set实例的元素；</li>
<li>clear()-清除所有元素，无返回值。</li>
</ul>
<p><strong>map的key可以是任何数据类型</strong>，Map中的键值是有序的，Map的键值对个数可以从 size 属性获取。</p>
<p>属性和方法：</p>
<ul>
<li>set：设置成员key和value;</li>
<li>get :获取成员属性值；</li>
<li>has:判断是否值存在；</li>
<li>delete：删除；</li>
<li>clear：清除所有</li>
</ul>
<p><em>set存储单个的值，map存储键值对</em></p>
<h2 id="30-介绍一下es6的symbol"><a href="#30-介绍一下es6的symbol" class="headerlink" title="30.介绍一下es6的symbol"></a>30.介绍一下es6的symbol</h2><p>symbol是es6新增的一种数据类型，symbol可以用来创建唯一值，可以用作对象的属性。</p>
<ol>
<li>作为属性名时不能被for…in, for…of遍历，不能被Object.keys()或者object.getOwnPropertyNames()返回</li>
<li>不能使用new命令</li>
<li>相同参数的symbol（）返回的值是不相等的：例如let a &#x3D; Symbol(‘a’) let b &#x3D; Symbol（’a’）a&#x3D;&#x3D;&#x3D;b 返回false</li>
<li>Symbol 值作为属性名时，该属性是公有属性不是私有属性</li>
<li>Symbol 作为对象的属性名，可以保证属性不重名,可以在类的外部访问。</li>
<li>Symbol 作为对象属性名时不能用.运算符，要用方括号[]</li>
</ol>
<h1 id="2021-11-9"><a href="#2021-11-9" class="headerlink" title="2021.11.9"></a>2021.11.9</h1><h2 id="31-常见的DOM操作有哪些"><a href="#31-常见的DOM操作有哪些" class="headerlink" title="31.常见的DOM操作有哪些"></a>31.常见的DOM操作有哪些</h2><ul>
<li><p>增：createElement(),appendChild()</p>
</li>
<li><p>删：removeChild()</p>
</li>
<li><p>改: insertBefore(),appendChild()</p>
</li>
<li><p>查：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">getElementById // 按照 id 查询</span><br><span class="line">getElementsByTagName // 按照标签名查询</span><br><span class="line">getElementsByClassName // 按照类名查询</span><br><span class="line">querySelectorAll // 按照 css 选择器查询</span><br><span class="line"></span><br></pre></td></tr></table></figure></li>
</ul>
<h2 id="32-数组有哪些原生方法？"><a href="#32-数组有哪些原生方法？" class="headerlink" title="32.数组有哪些原生方法？"></a>32.数组有哪些原生方法？</h2><p>(具体使用可自己查)</p>
<p>slice，splice，pop，push，unshift，shift</p>
<p>toString,reverse,sort,concat,indexOf,lastIndexOf,every,some,filter,forEach,reduce,reduceRight</p>
<p>find,findIndex, includes, fill,join,flat flatmap entries reduceRight</p>
<h2 id="33-重绘和回流"><a href="#33-重绘和回流" class="headerlink" title="33.重绘和回流"></a>33.重绘和回流</h2><p><strong>重绘</strong>：当页面中某些元素的<strong>样式发生变化</strong>比如颜色等，但是<strong>不会影响</strong>其在文档流中的<strong>位置</strong>时，浏览器就会对元素进行重新绘制，这个过程就是重绘，不会导致浏览器重新渲染页面，<strong>不影响性能</strong>。</p>
<p><strong>重流（回流）</strong>：渲染树中部分或者全部元素的<strong>大小尺寸、位置，结构或者属性</strong>发生变化时，浏览器会重新渲染部分或者全部文档的过程，会<strong>影响性能</strong>。</p>
<h2 id="34-协商缓存和强缓存的区别"><a href="#34-协商缓存和强缓存的区别" class="headerlink" title="34.协商缓存和强缓存的区别"></a>34.协商缓存和强缓存的区别</h2><p><strong>强制缓存：</strong> 优先级较高，先比较当前时间与上一次返回 200 时的时间差，如果没有超过 cache-control 设置的 max-age，则没有过期，并命中强缓存，<strong>直接从本地读取资源</strong>。如果浏览器不支持HTTP1.1，则使用 expires 头判断是否过期；强制缓存不用走请求，使用强制缓存可以提升性能。</p>
<p><strong>协商缓存：</strong> 白话说就是和服务端协商能不能用缓存，需耗时。向服务器发送带有<strong>If-None-Match</strong>和<strong>If-Modified-Since</strong>的请求优先根据Etag的值判断被请求的文件有没有做修改，<strong>Etag</strong> 值一致则没有修改，命中协商缓存，返回304；如果不一致则有改动，直接返回新的资源文件带上新的 Etag 值并返回 200； 如果服务器收到的请求没有 Etag 值，则将If-Modified-Since和被请求文件的最后修改时间做比对，一致则命中协商缓存，返回304；不一致则返回新的 <strong>last-modified</strong> 和文件并返回 200；</p>
<p><img src= "" data-lazy-src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6c0e551f51ab4a9a986d472f62c07daa~tplv-k3u1fbpfcp-watermark.awebp" alt="image.png"></p>
<h2 id="35-浏览器的渲染过程"><a href="#35-浏览器的渲染过程" class="headerlink" title="35.浏览器的渲染过程"></a>35.浏览器的渲染过程</h2><ol>
<li>生成DOM 树：首先解析收到的文档(html)，根据文档定义构建一棵 DOM 树，DOM 树是由 DOM 元素及属性节点组成的网页结构框架。</li>
<li>生成CSSOM 规则树：然后对 CSS 进行解析，生成 CSSOM 规则树,它决定了网页的样式。</li>
<li>构建成渲染树：将 DOM树 和 CSSOM规则树 构建成 渲染树(Render Tree)。</li>
<li>布局阶段：浏览器开始计算布局（元素位置信息，大小等等），计算层级，position z-index会导致产生新的层，渲染还会对区域进行分块。接下来图层绘制（画像素，媒体文件解码），最后图层合并，GPU绘制。</li>
<li>绘制阶段：布局阶段结束后是绘制阶段，遍历渲染树并调用渲染对象的paint方法，将它们的内容显示在屏幕上，绘制使用 UI 基础组件，遇到script标签则暂停渲染，优先加载并执行JS代码，执行完后再继续渲染（js线程和dom渲染线程是共用一个线程的；因为js有可能会改变dom结构有可能改变Render Tree结构），所以 我们要把js放在末尾避免它堵塞加载渲染页面；Css如果没有解析完 rendertree会构建不了，样式放在底部可能会导致重绘，所以css 要放前面尽早加载出来。</li>
<li>直至把Render Tree渲染显示完成</li>
</ol>
<h1 id="2021-11-10"><a href="#2021-11-10" class="headerlink" title="2021.11.10"></a>2021.11.10</h1><h2 id="36-伪元素和伪类的区别和作用？"><a href="#36-伪元素和伪类的区别和作用？" class="headerlink" title="36.伪元素和伪类的区别和作用？"></a>36.伪元素和伪类的区别和作用？</h2><p>伪元素：在一个元素前后加一个元素或者样式，但是在dom节点上不存在这个元素,代表某个元素的子元素，特征看起来有 ::</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">::before </span><br><span class="line">::after </span><br><span class="line">::placeholder </span><br><span class="line">::selection </span><br><span class="line">::first-letter </span><br><span class="line">::first-line</span><br></pre></td></tr></table></figure>

<p>伪类：在css中只有一个:形成，不会产生新的元素，可以在元素选择器上改变元素的状态，特征看起来有 :</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">:hover </span><br><span class="line">:link </span><br><span class="line">:active </span><br><span class="line">:focus </span><br><span class="line">:first-child </span><br><span class="line">:last-child</span><br></pre></td></tr></table></figure>

<p>区别：是否创建了新的元素</p>
<h2 id="37-this-的指向"><a href="#37-this-的指向" class="headerlink" title="37.this 的指向"></a>37.this 的指向</h2><ol>
<li>箭头函数：往上找到的最近的词法作用域的this指向</li>
<li>定时器：windows</li>
<li>对象&#x2F;函数调用：this指向调用方，</li>
<li>全局直接调用函数：window（非严格模式），undefined（严格模式）</li>
<li>构造函数：this指向实例</li>
<li>显示绑定apply\call\bind：指向第一个参数</li>
</ol>
<h2 id="38-https-加密过程"><a href="#38-https-加密过程" class="headerlink" title="38.https 加密过程"></a>38.https 加密过程</h2><p>https是由http通讯，用SSL&#x2F;TLS（完全传输层协议）来加密数据包的，https主要是提供对网站服务器的身份认证，保护交换数据的隐私和完整性。</p>
<p>传输加密过程：</p>
<p>（1）客户端先向服务端发起https请求，客户端生成一个随机数发给服务端，传输的时候会带上客户端支持的加密方式套件，还带上协议版本号（随机数 + 加密方式套件 + 协议版本号）</p>
<p>（2）服务端收到请求后存放随机数，确认加密方法，也生成一个随机数伴随着公钥（数字证书）一起传给客户端（加密方法+随机数+公钥）</p>
<p>（3）客户端确认服务器证书后对证书进行递归验证并获取公钥，把收到的公钥生成一个预主密钥，再生成一个用公钥加密后的随机数一起发给服务端，还会发一个用hash加密过的内容（预主密钥+随机数）</p>
<p>（4）服务端拿到预主秘钥后，用私钥解密信息拿到预主密钥</p>
<p>（5）客户端和服务端同时对这三个随机数用同一套加密方式算出一个主密钥，所以这个主密钥只有客户端和服务端知道，中间件是破解不了的</p>
<p>（6）客户端finished，发送共享秘钥key加密过的“finished”信号</p>
<p>（7）服务端finished，发送共享秘钥key加密过的“finished”信号</p>
<p>（8）达成安全通信</p>
<p><img src= "" data-lazy-src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7fa5e1268d01439eace7885f6fe0c4fb~tplv-k3u1fbpfcp-watermark.awebp" alt="image.png"></p>
<h2 id="39-柯里化的定义和实现"><a href="#39-柯里化的定义和实现" class="headerlink" title="39.柯里化的定义和实现"></a>39.柯里化的定义和实现</h2><p>柯里化是把接受多个参数的函数变成接受单一参数的函数，并返回接受剩下参数返回结果的技术， 本质就是要实现减少代码冗余同时增加可读性，用途之一：参数复用</p>
<ul>
<li>输入是一个函数，并且这个函数拥有n个参数</li>
<li>输出也是一个函数，并且可以使用fn()()()这种方式调用</li>
<li>参数被柯里化过程中的函数被拆分</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">let add = this.curry(this.addf)</span><br><span class="line">console.log(add(1)(2)(3)(4)(5, 3), &#x27;111&#x27;)</span><br><span class="line">curry(fn, ...args) &#123;</span><br><span class="line">      console.log(args, &#x27;args,fn一直没有改变&#x27;)</span><br><span class="line">      return args.length &lt; fn.length ? (...innerArgs) =&gt; &#123; console.log(innerArgs, &#x27;innerArgs&#x27;); return this.curry(fn, ...args, ...innerArgs) &#125; : fn(...args)</span><br><span class="line">&#125;,</span><br><span class="line">addf(a, b, c, d, e) &#123;</span><br><span class="line">      return a + b + c + d + e</span><br><span class="line">&#125;,</span><br><span class="line">    </span><br></pre></td></tr></table></figure>

<h2 id="40-什么是-JavaScript-生成器？如何使用生成器？"><a href="#40-什么是-JavaScript-生成器？如何使用生成器？" class="headerlink" title="40.什么是 JavaScript 生成器？如何使用生成器？"></a>40.什么是 JavaScript 生成器？如何使用生成器？</h2><p>generator生成器是一种返回迭代器的函数，通过functuion关键字后的星号(*)来表示，函数中会用到新的关键字yield，星号可以紧挨着function关键字，也可以在中间添加一个空格.</p>
<p><strong>特性</strong>：</p>
<ol>
<li>每当执行完一条yield语句后函数就会自动停止执行，直到再次调用next();</li>
<li>yield – 关键字只可在生成器内部使用，yeild是相当于return的功能,在其他地方使用会导致程序抛出错误;</li>
<li>可以通过函数表达式来创建生成器，但是不能使用箭头函数</li>
<li>generator并不执行但会返回一个遍历器对象，当执行next()的时候才依次执行内部的函数</li>
<li>用函数名之前加上*的方式去创建，具有暂停、执行、结束三种状态</li>
<li>Generator.prototype.throw() – 向生成器抛出错误</li>
<li>Generator.prototype.return()– 返回给定的值并结束生成器</li>
<li>Generator.prototype.next()– 返回一个由yeild表达式生成的值</li>
<li>yield* –  Generator函数内部调用另一个Generator函数</li>
</ol>
<h1 id="2021-11-11"><a href="#2021-11-11" class="headerlink" title="2021.11.11"></a>2021.11.11</h1><h2 id="41-你知道哪些攻击类型？"><a href="#41-你知道哪些攻击类型？" class="headerlink" title="41.你知道哪些攻击类型？"></a>41.你知道哪些攻击类型？</h2><ol>
<li><p><strong>XSS攻击</strong>：跨站脚本攻击，是一种代码注入攻击。攻击者把可执行的恶意脚本注入搭配页面中，使之在用户的浏览器上运行，从而盗取用户的信息如 cookie 等。</p>
<p>解决方案：1.  对需要插入到 HTML 中的代码做好充分的转义；2.使用 CSP，建立一个白名单，告诉浏览器哪些外部资源可以加载和执行，从而防止恶意代码的注入攻击</p>
</li>
<li><p><strong>CSRF攻击</strong>：跨站请求伪造攻击，攻击者诱导用户进入一个第三方网站，然后该网站向被攻击网站发送跨站请求，如果用户在被攻击网站中保存了登录状态，那么攻击者就可以利用这个登录状态，绕过后台的用户验证，冒充用户向服务器执行一些操作。比如攻击者可以通过在输入留言框内输入可发送请求的代码，留言放到网站上，这样每个人进入这个网站的时候都会执行这行代码并发送携带自己的cookie账号密码等关键信息的请求，这样攻击者就能拿到用户的信息伪造拿去登录了</p>
<p>解决方案：1.同源检测，2.使用 CSRF Token 进行验证，3.限制 cookie 不能作为被第三方使用</p>
</li>
</ol>
<h2 id="42-实现一个函数-countFn，接收一个函数作为参数，返回一个新函数，具备调用计数功能"><a href="#42-实现一个函数-countFn，接收一个函数作为参数，返回一个新函数，具备调用计数功能" class="headerlink" title="42.实现一个函数 countFn，接收一个函数作为参数，返回一个新函数，具备调用计数功能"></a>42.实现一个函数 countFn，接收一个函数作为参数，返回一个新函数，具备调用计数功能</h2><p>&#96;1.Proxy中<strong>函数调用操作的捕捉器</strong>是apply，因此我们只需要有一个计数的属性count，然后重写apply中内容，在这里面做count的增量就行了。</p>
<p>这样每次调用 testCount()，都会执行到 apply 里的内容。</p>
<p>至于 count，不论是放在 handler 这个对象中还是放到 countFn 这个函数里面都可以：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">countFn</span> (fn) &#123;</span><br><span class="line">    <span class="keyword">var</span> count = <span class="number">0</span></span><br><span class="line">    <span class="keyword">let</span> handler = &#123;</span><br><span class="line">        <span class="comment">// count: 0,</span></span><br><span class="line">        <span class="attr">apply</span>: <span class="keyword">function</span>(<span class="params">target, that, args</span>) &#123;</span><br><span class="line">            <span class="comment">// console.log(target, that, args);</span></span><br><span class="line">            <span class="comment">// console.log(++this.count);</span></span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>(++count);</span><br><span class="line">            target.<span class="title function_">apply</span>(that, args);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Proxy</span>(fn, handler);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">test</span> () &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;test&#x27;</span>);</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">test2</span> () &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;test2&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> testCount = <span class="title function_">countFn</span>(test);</span><br><span class="line"><span class="keyword">const</span> test2Count = <span class="title function_">countFn</span>(test2);</span><br><span class="line"><span class="title function_">testCount</span>(); <span class="comment">// 1 &#x27;test&#x27;</span></span><br><span class="line"><span class="title function_">testCount</span>(); <span class="comment">// 2 &#x27;test&#x27;</span></span><br><span class="line"><span class="title function_">testCount</span>(); <span class="comment">// 3 &#x27;test&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="title function_">test2Count</span>(); <span class="comment">// 1 &#x27;test2&#x27;</span></span><br><span class="line"><span class="title function_">test2Count</span>(); <span class="comment">// 2 &#x27;test2&#x27;</span></span><br><span class="line"><span class="title function_">test2Count</span>(); <span class="comment">// 3 &#x27;test2&#x27;</span></span><br></pre></td></tr></table></figure>

<p>2.闭包</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">countFn</span>(<span class="params">fn</span>)&#123;</span><br><span class="line">    <span class="keyword">var</span> count=<span class="number">0</span></span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">        count++</span><br><span class="line">        fn.<span class="title function_">call</span>(<span class="variable language_">this</span>,...<span class="variable language_">arguments</span>)</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(count)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fn1</span>(<span class="params">test</span>)&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;test1&#x27;</span>,test)</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fn2</span>(<span class="params">test</span>)&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;test2&#x27;</span>,test)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> test1 =<span class="title function_">countFn</span>(fn1)</span><br><span class="line"><span class="keyword">var</span> test2 =<span class="title function_">countFn</span>(fn2)</span><br><span class="line"></span><br><span class="line"><span class="title function_">test1</span>(<span class="string">&#x27;111&#x27;</span>)</span><br><span class="line"><span class="title function_">test2</span>(<span class="string">&#x27;111&#x27;</span>)</span><br><span class="line"><span class="title function_">test1</span>(<span class="string">&#x27;222&#x27;</span>)</span><br><span class="line"><span class="title function_">test2</span>(<span class="string">&#x27;222&#x27;</span>)</span><br><span class="line"><span class="title function_">test2</span>(<span class="string">&#x27;333&#x27;</span>)</span><br><span class="line"><span class="title function_">test1</span>(<span class="string">&#x27;333&#x27;</span>)</span><br><span class="line"><span class="comment">//test1 111 1</span></span><br><span class="line"><span class="comment">//test2 111 1</span></span><br><span class="line"><span class="comment">//test1 222 2</span></span><br><span class="line"><span class="comment">//test2 222 2</span></span><br><span class="line"><span class="comment">//test2 333 3</span></span><br><span class="line"><span class="comment">//test1 333 3</span></span><br></pre></td></tr></table></figure>

<p>3.放在prototype上</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">Function</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">countFn</span>=<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="keyword">var</span> count=<span class="number">0</span>;</span><br><span class="line">    <span class="keyword">var</span> fn=<span class="variable language_">this</span></span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">        count++</span><br><span class="line">        fn.<span class="title function_">call</span>(<span class="variable language_">this</span>,...<span class="variable language_">arguments</span>)</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(count)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> test1= fn1.<span class="title function_">countFn</span>()</span><br><span class="line"><span class="keyword">var</span> test2= fn2.<span class="title function_">countFn</span>()</span><br><span class="line"><span class="title function_">test1</span>(<span class="string">&#x27;111&#x27;</span>)</span><br><span class="line"><span class="title function_">test2</span>(<span class="string">&#x27;111&#x27;</span>)</span><br><span class="line"><span class="title function_">test1</span>(<span class="string">&#x27;222&#x27;</span>)</span><br><span class="line"><span class="title function_">test2</span>(<span class="string">&#x27;222&#x27;</span>)</span><br><span class="line"><span class="title function_">test2</span>(<span class="string">&#x27;333&#x27;</span>)</span><br><span class="line"><span class="title function_">test1</span>(<span class="string">&#x27;333&#x27;</span>)</span><br><span class="line"><span class="comment">//test1 111 1</span></span><br><span class="line"><span class="comment">//test2 111 1</span></span><br><span class="line"><span class="comment">//test1 222 2</span></span><br><span class="line"><span class="comment">//test2 222 2</span></span><br><span class="line"><span class="comment">//test2 333 3</span></span><br><span class="line"><span class="comment">//test1 333 3</span></span><br></pre></td></tr></table></figure>

<p>&#96;</p>
<h2 id="43-Object-create-null-和直接用字面量-创建空对象有什么区别和好处吗"><a href="#43-Object-create-null-和直接用字面量-创建空对象有什么区别和好处吗" class="headerlink" title="43.Object.create(null) 和直接用字面量{}创建空对象有什么区别和好处吗"></a>43.Object.create(null) 和直接用字面量{}创建空对象有什么区别和好处吗</h2><p>Object.create()有两个参数，第一个参数是指定的原型对象，第二个参数是可选参数，给新对象自身添加新属性以及描述器</p>
<p>直接创建{ }的话内部会有很多对象内置写好的原型，里面存放了对象的属性和方法，而Object.create(null)的话是以null为原型创建对象，这样创建出来的对象相对比较干净，没有那么多属性和方法，不会担心自己写的方法会和原型链上的方法名重复，可以节省hasOwnProperty带来的性能损失；如果我们是想自己在一个干净的对象里写属性方法不被原生的原型上的属性和方法影响的话，可以采取Object.create(null)这种方式</p>
<h2 id="44-手写Promise-then如何保证后一个then里的方法在前一个then结束之后再执行？"><a href="#44-手写Promise-then如何保证后一个then里的方法在前一个then结束之后再执行？" class="headerlink" title="44.手写Promise.then如何保证后一个then里的方法在前一个then结束之后再执行？"></a>44.手写Promise.then如何保证后一个then里的方法在前一个then结束之后再执行？</h2><p>我们可以将传给 <code>then</code> 的函数和新 <code>promise</code> 的 <code>resolve</code> 一起 <code>push</code> 到前一个 <code>promise</code> 的 <code>callbacks</code> 数组中，达到承前启后的效果：</p>
<ul>
<li>承前：当前一个 <code>promise</code> 完成后，调用其 <code>resolve</code> 变更状态，在这个 <code>resolve</code> 里会依次调用 <code>callbacks</code> 里的回调，这样就执行了 <code>then</code> 里的方法了</li>
<li>启后：上一步中，当 <code>then</code> 里的方法执行完成后，返回一个结果，如果这个结果是个简单的值，就直接调用新 <code>promise</code> 的 <code>resolve</code>，让其状态变更，这又会依次调用新 <code>promise</code> 的 <code>callbacks</code> 数组里的方法，循环往复。。如果返回的结果是个 <code>promise</code>，则需要等它完成之后再触发新 <code>promise</code> 的 <code>resolve</code>，所以可以在其结果的 <code>then</code> 里调用新 <code>promise</code> 的 <code>resolve</code></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">then</span>(<span class="params">onFulfilled, onReject</span>)&#123;</span><br><span class="line">    <span class="comment">// 保存前一个promise的this</span></span><br><span class="line">    <span class="keyword">const</span> self = <span class="variable language_">this</span>; </span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">MyPromise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="comment">// 封装前一个promise成功时执行的函数</span></span><br><span class="line">      <span class="keyword">let</span> <span class="title function_">fulfilled</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">        <span class="keyword">try</span>&#123;</span><br><span class="line">          <span class="keyword">const</span> result = <span class="title function_">onFulfilled</span>(self.<span class="property">value</span>); <span class="comment">// 承前</span></span><br><span class="line">          <span class="keyword">return</span> result <span class="keyword">instanceof</span> <span class="title class_">MyPromise</span>? result.<span class="title function_">then</span>(resolve, reject) : <span class="title function_">resolve</span>(result); <span class="comment">//启后</span></span><br><span class="line">        &#125;<span class="keyword">catch</span>(err)&#123;</span><br><span class="line">          <span class="title function_">reject</span>(err)</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="comment">// 封装前一个promise失败时执行的函数</span></span><br><span class="line">      <span class="keyword">let</span> <span class="title function_">rejected</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">        <span class="keyword">try</span>&#123;</span><br><span class="line">          <span class="keyword">const</span> result = <span class="title function_">onReject</span>(self.<span class="property">reason</span>);</span><br><span class="line">          <span class="keyword">return</span> result <span class="keyword">instanceof</span> <span class="title class_">MyPromise</span>? result.<span class="title function_">then</span>(resolve, reject) : <span class="title function_">reject</span>(result);</span><br><span class="line">        &#125;<span class="keyword">catch</span>(err)&#123;</span><br><span class="line">          <span class="title function_">reject</span>(err)</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">switch</span>(self.<span class="property">status</span>)&#123;</span><br><span class="line">        <span class="keyword">case</span> <span class="attr">PENDING</span>: </span><br><span class="line">          self.<span class="property">onFulfilledCallbacks</span>.<span class="title function_">push</span>(fulfilled);</span><br><span class="line">          self.<span class="property">onRejectedCallbacks</span>.<span class="title function_">push</span>(rejected);</span><br><span class="line">          <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> <span class="attr">FULFILLED</span>:</span><br><span class="line">          <span class="title function_">fulfilled</span>();</span><br><span class="line">          <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> <span class="attr">REJECT</span>:</span><br><span class="line">          <span class="title function_">rejected</span>();</span><br><span class="line">          <span class="keyword">break</span>;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">   &#125;</span><br></pre></td></tr></table></figure>

<p><strong>注意：</strong></p>
<ul>
<li>连续多个 <code>then</code> 里的回调方法是同步注册的，但注册到了不同的 <code>callbacks</code> 数组中，因为每次 <code>then</code> 都返回新的 <code>promise</code> 实例（参考上面的例子和图）</li>
<li>注册完成后开始执行构造函数中的异步事件，异步完成之后依次调用 <code>callbacks</code> 数组中提前注册的回调</li>
</ul>
<h1 id="2021-11-12"><a href="#2021-11-12" class="headerlink" title="2021.11.12"></a>2021.11.12</h1><h2 id="45-事件循环代码输出题"><a href="#45-事件循环代码输出题" class="headerlink" title="45.事件循环代码输出题"></a>45.事件循环代码输出题</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">async</span> <span class="keyword">function</span> <span class="title function_">async1</span> () &#123; </span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;1&#x27;</span>); </span><br><span class="line">    <span class="keyword">await</span> <span class="title function_">async2</span>(); </span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;2&#x27;</span>); </span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">async</span> <span class="keyword">function</span> <span class="title function_">async2</span> () &#123; </span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;3&#x27;</span>); </span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;4&#x27;</span>)</span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;5&#x27;</span>);</span><br><span class="line">    <span class="title class_">Promise</span>.<span class="title function_">resolve</span>().<span class="title function_">then</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123; </span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;6&#x27;</span>); </span><br><span class="line">    &#125;);</span><br><span class="line">&#125;, <span class="number">0</span>);</span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;7&#x27;</span>);</span><br><span class="line">    <span class="title class_">Promise</span>.<span class="title function_">resolve</span>().<span class="title function_">then</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123; </span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;8&#x27;</span>); </span><br><span class="line">    &#125;);</span><br><span class="line">&#125;, <span class="number">0</span>);</span><br><span class="line"><span class="title function_">async1</span>();</span><br><span class="line"><span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="keyword">function</span> (<span class="params">resolve</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;9&#x27;</span>); </span><br><span class="line">    <span class="title function_">resolve</span>();</span><br><span class="line">&#125;).<span class="title function_">then</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123; </span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;10&#x27;</span>); </span><br><span class="line">&#125;);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;11&#x27;</span>);</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>答案：4-&gt;1-&gt;3-&gt;9-&gt;11-&gt;2-&gt;10-&gt;5-&gt;6-&gt;7-&gt;8（注意：微任务要在当前本轮宏任务执行完成之后再次执行）</p>
<h2 id="46-类型变换代码输出题"><a href="#46-类型变换代码输出题" class="headerlink" title="46.类型变换代码输出题"></a>46.类型变换代码输出题</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">var home = &#123;</span><br><span class="line">    address: &#x27;shanghai&#x27;</span><br><span class="line">&#125;</span><br><span class="line">var xrr = Object.create(home);</span><br><span class="line">delete xrr.address</span><br><span class="line">console.log(xrr.address);</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>答案：shanghai（注意：delete不能删除原型上的属性）</p>
<h2 id="47-作用域相关代码输出题"><a href="#47-作用域相关代码输出题" class="headerlink" title="47.作用域相关代码输出题"></a>47.作用域相关代码输出题</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">var x = 1;</span><br><span class="line">if (function f () &#123; &#125;) &#123;</span><br><span class="line">    x += typeof f;</span><br><span class="line">&#125;</span><br><span class="line">console.log(x)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>答案：1undefined （注意：typeof运算结果为字符串,函数声明写在运算符中，其为 true，但 <strong>放在运算符中的函数声明在执行阶段时找不到的</strong>）</p>
<h2 id="48-闭包代码输出题"><a href="#48-闭包代码输出题" class="headerlink" title="48.闭包代码输出题"></a>48.闭包代码输出题</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">function xrr (n, o) &#123;</span><br><span class="line">    console.log(o); </span><br><span class="line">    return &#123;</span><br><span class="line">        XRR: function (m) &#123;</span><br><span class="line">            return xrr(m, n);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">const a = xrr(0); a.XRR(1); a.XRR(2); a.XRR(3);</span><br><span class="line">const b = xrr(0).XRR(1).XRR(2).XRR(3);</span><br><span class="line">const c = xrr(0).XRR(1); c.XRR(2); c.XRR(3);</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>答案：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">undefined  0 0 0 </span><br><span class="line">undefined  0 1 2 </span><br><span class="line">undefined  0 1 1</span><br></pre></td></tr></table></figure>

<p>解析：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">1. a 执行过程：const a = xrr(0); a.XRR(1); a.XRR(2); a.XRR(3);</span><br><span class="line"></span><br><span class="line">1&gt; const a = xrr(0); 当把0传进去的时候，调用的是外层的函数xrr传入参数0，n为0，但是o没有值，打印为undefined，返回一个未执行的函数赋值给a，其中a的XRR的n为0</span><br><span class="line">2&gt; a.XRR(1) ；执行内层的函数XRR并传入1进去返回执行xrr的结果，此时xrr传入1，0两个参数，打印第二个参数为0，所以输出为0</span><br><span class="line">3&gt; a.XRR(2) ；执行内层的函数XRR并传入1进去返回执行xrr的结果，此时xrr传入2，0两个参数，打印第二个参数为0，所以输出为0</span><br><span class="line">4&gt; a.XRR(3) ；执行内层的函数XRR并传入1进去返回执行xrr的结果，此时xrr传入3，0两个参数，打印第二个参数为0，所以输出为0</span><br><span class="line"></span><br><span class="line">所以结果是 undefined 0 0 0</span><br><span class="line"></span><br><span class="line">2. b 执行过程：const b = xrr(0).XRR(1).XRR(2).XRR(3);</span><br><span class="line"></span><br><span class="line">1&gt; 第一次调用第一层xrr(0) 时，o 为 undefined</span><br><span class="line">2&gt; 第二次调用 .XRR(1) 时 m 为 1，此时 xrr 闭包了外层函数的 n ，也就是第一次调用的 n=0，即 m=1,n=0，并在内部调用第一层的xrr(1,0)；所以 o 为 0；</span><br><span class="line">3&gt; 第三次调用 .XRR(2) 时 m 为 2，此时当前的 xrr 函数不是第一次执行的返回对象，而是第二次执行的返回对象。而在第二次第一层 xrr(1,0) 时，n=1,o=0，返回时闭包了第二次的 n，所以在第三次调用第三层的 XRR 函数时，m=2,n=1，即调用第一层 xrr（2，1） 函数，所以 o 为 1；</span><br><span class="line">4&gt; 第四次调用 .XRR(3) 时 m=3，闭包了第三次的 n ，同理，最终调用第一层 xrr(3,2)；所以 o 为 2</span><br><span class="line"></span><br><span class="line">所以结果为： undefined 0 1 2</span><br><span class="line"></span><br><span class="line">3. c 执行过程：const c = xrr(0).XRR(1); c.XRR(2); c.XRR(3);</span><br><span class="line"></span><br><span class="line">1&gt; const c = xrr(0)：调用第一层xrr(0) 时，o 为 undefined</span><br><span class="line">2&gt; 第二次调用 .XRR(1) 时 m 为 1，此时 XRR 闭包了外层函数的 n ，也就是第一次调用的 n=0，即 m=1,n=0，并在内部调用第一层的xrr(1,0)；所以 o 为 0</span><br><span class="line">3&gt; 第三次调用 .XRR(2) 时 m 为 2，此时xrr闭包的是第二次执行的返回的函数XRR（内层的xrr(m=2(本次传入的2),n=1（私有值1）),所以外层的xrr(n=2,o=1)）。所以打印 o 输出为 1；</span><br><span class="line">4&gt; 第四次 .XRR(3) 时同理，但依然时调用第二次的返回值，所以最终调用第一层的 XRR(3,1)，所以 o 为 1</span><br><span class="line"></span><br><span class="line">所以结果是 undefined 0 1 1</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h1 id="2021-11-15"><a href="#2021-11-15" class="headerlink" title="2021.11.15"></a>2021.11.15</h1><h2 id="49-TCP是如何保持可靠的？"><a href="#49-TCP是如何保持可靠的？" class="headerlink" title="49.TCP是如何保持可靠的？"></a>49.TCP是如何保持可靠的？</h2><ol>
<li>连接管理机制：tcp是面向连接的协议，也就是说收发前必须和对方建立可靠的链接，一个tcp必须经过三四才能建立起来，大大的提高了数据可靠性，使我们在数据收发前就有了交互，为正式传输打下了基础；</li>
<li>序列号机制，保证数据乱序处理：tcp为了保证报文传输可靠，给每个包一个序号，同时序号也保证了传输到接收端实体的包的安顺序接收，</li>
<li>确认重传机制：然后接受端实体对已成功收到的字节发回一个相应的确认ack，如果发送端实体在合理往返时延内未收到确认，那么对应的丢失数据将被重传.</li>
<li>当网络拥塞时，tcp能够减少向网络注入数据的速率和数量，缓解拥塞</li>
<li>流量控制：处理能力</li>
<li>拥塞控制：网络环境</li>
</ol>
<h2 id="50-后端一次性给出几万条数据该怎么渲染-？"><a href="#50-后端一次性给出几万条数据该怎么渲染-？" class="headerlink" title="50.后端一次性给出几万条数据该怎么渲染 ？"></a>50.后端一次性给出几万条数据该怎么渲染 ？</h2><ol>
<li>优先使用虚拟列表（思路就是动态控制显示区域的内容，类似于antd滚动加载无限长列表）</li>
<li>使用分页</li>
<li>js缓冲器分片处理</li>
<li>web worker（懒加载-&gt;页面会崩溃了）</li>
<li>尽量使用flexbox布局</li>
<li>使用骨架组件减少布局移动</li>
<li>Windowing提高性能</li>
<li>时间分片: 1.定时器(setTimeout) 有白屏现象 —&gt; requestAnimationFrame -&gt; DocumentFragment—-&gt;…..</li>
</ol>
<h2 id="51-前端的一次请求会经过哪些缓存？"><a href="#51-前端的一次请求会经过哪些缓存？" class="headerlink" title="51.前端的一次请求会经过哪些缓存？"></a>51.前端的一次请求会经过哪些缓存？</h2><p>强缓，协商缓存，启发缓存，缓存失败，四个阶段</p>
<h2 id="52-promise和async-await的区别"><a href="#52-promise和async-await的区别" class="headerlink" title="52.promise和async await的区别"></a>52.promise和async await的区别</h2><p>promise解决回调地狱的问题，但会有一些逻辑混乱的问题，而async await是在promise的基础上优化了的，可以解决逻辑混乱的问题，以同步的视角去看异步</p>
<h2 id="53-算法题：不同路径（动态规划）"><a href="#53-算法题：不同路径（动态规划）" class="headerlink" title="53.算法题：不同路径（动态规划）"></a>53.算法题：不同路径（动态规划）</h2><p><a href="https://link.juejin.cn/?target=https://leetcode-cn.com/problems/unique-paths/">leetcode-cn.com&#x2F;problems&#x2F;un…</a> <img src= "" data-lazy-src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1d2a4dd927904a59a99aab200bb9b4ce~tplv-k3u1fbpfcp-watermark.awebp" alt="image.png"></p>
<h1 id="2021-11-16"><a href="#2021-11-16" class="headerlink" title="2021.11.16"></a>2021.11.16</h1><h2 id="54-说一下-js-严格模式下有哪些不同"><a href="#54-说一下-js-严格模式下有哪些不同" class="headerlink" title="54.说一下 js 严格模式下有哪些不同"></a>54.说一下 js 严格模式下有哪些不同</h2><ol>
<li>严格模式下无法再意外创建全局变量。</li>
<li>严格模式会使引起静默失败的赋值操作抛出异常</li>
<li>在严格模式下, 试图删除不可删除的属性时会抛出异常</li>
<li>严格模式要求函数的参数名唯一</li>
<li>严格模式禁止八进制数字语法</li>
<li>严格模式禁用with</li>
<li>严格模式下eval不再为上层范围引入新变量</li>
<li>严格模式禁止删除声明变量</li>
<li>名称eval和arguements不能通过程序语法被绑定或赋值</li>
<li>严格模式下，参数的值不会随argurments对象的值的改变而变化</li>
<li>不再支持arguments.callee</li>
<li>在严格模式下通过this传递给一个函数的值不会被强制转换为一个对象。</li>
<li>在严格模式中再也不能通过广泛实现的ecmascript扩展“游走于”javascript的栈中</li>
<li>严格模式下的arguements不会再提供访问与调用这个函数相关的变量的途径</li>
<li>在严格模式中一部分字符变成了保留的关键字。</li>
<li>严格模式禁止了不在脚本或者函数层面上的函数声明。</li>
</ol>
<h2 id="55-说一下递归和迭代的区别是什么，各有什么优缺点？"><a href="#55-说一下递归和迭代的区别是什么，各有什么优缺点？" class="headerlink" title="55.说一下递归和迭代的区别是什么，各有什么优缺点？"></a>55.说一下递归和迭代的区别是什么，各有什么优缺点？</h2><p>（一）定义：</p>
<p><strong>递归:</strong> 递归常被用来描述以自相似方法重复事物的过程，在数学和开发中，指的是在函数定义中使用函数自身的方法；递归实际上不断地深层调用函数，直到函数有返回才会逐层的返回，递归是用栈机制实现的，每深入一层，都要占去一块栈数据区域，因此，递归涉及到运行时的堆栈开销（参数必须压入堆栈保存，直到该层函数调用返回为止），所以有可能导致堆栈溢出的错误；但是递归编程所体现的思想正是人们追求简洁、将问题交给计算机，以及将大问题分解为相同小问题从而解决大问题的动机。递归，还有个尾调用优化，尾调用优化就是如果本次调用的返回值，是子调用的返回值的话，本次调用就可以直接出栈了，不需要进行嵌套。就可以实现栈深为1的递归调用。递归从字面可以其理解为重复“递推”和“回归”的过程（递推：层层推进，分解问题；回归：层层回归，返回较大问题的解）</p>
<p><strong>迭代:</strong> 是重复反馈过程的活动，其目的通常是为了接近并到达所需的目标或结果。每一次对过程的重复被称为一次“迭代”，而每一次迭代得到的结果会被用来作为下一次迭代的初始值。迭代是顺序的，不涉及调用栈操作，前面的代码不会被后面代码影响，递归是涉及到调用栈的，遵循先入栈后结束后入栈先结束原则，前面的函数调用会阻塞，要在后面的调用返回值后才能继续执行，所以迭代的好处就是栈深小，但是代码逻辑不够清晰，递归则是嵌套调用多，栈深比较大，容易爆栈，但代码结构会比较简洁，速度的话还是迭代快。迭代大部分时候需要人为的对问题进行剖析，分析问题的规律所在，将问题转变为一次次的迭代来逼近答案。迭代不像递归那样对堆栈有一定的要求，另外一旦问题剖析完毕，就可以很容易的通过循环加以实现。迭代的效率高，但却不太容易理解，当遇到数据结构的设计时，比如图表、二叉树、网格等问题时，使用就比较困难，而是用递归就能省掉人工思考解法的过程，只需要不断的将问题分解直到返回就可以了。</p>
<p>（二）同异点：</p>
<ol>
<li><p>相同点：递归和迭代都是循环的一种。</p>
</li>
<li><p>不同点：</p>
<p>（1）程序结构不同：递归是重复调用函数自身实现循环。迭代是函数内某段代码实现循环。 其中，迭代与普通循环的区别是：迭代时，循环代码中参与运算的变量同时是保存结果的变量，当前保存的结果作为下一次循环计算的初始值。</p>
<p>（2）算法结束方式不同：递归循环中，遇到满足终止条件的情况时逐层返回来结束。迭代则使用计数器结束循环。 当然很多情况都是多种循环混合采用，这要根据具体需求。</p>
<p>（3）效率不同：在循环的次数较大的时候，迭代的效率明显高于递归</p>
<p>（4）运行过程不同，如果是循环迭代的话，这个整个就在主函数的或者在调用函数的栈空间里面，如果是递归的话，它会不断的申请函数调用的栈空间，在计算的过程中，计算一个结果，退一层栈，递归过程，在调用的时候有可能会出现栈的溢出。</p>
<p>（5）理论上递归和迭代时间复杂度方面是一样的，但实际应用中（函数调用和函数调用堆栈的开销）递归比迭代效率要低。</p>
</li>
</ol>
<p>（三）优缺点</p>
<ul>
<li><p>递归的</p>
<p>优点: 大问题转化为小问题，可以减少代码量，同时代码精简，可读性好。</p>
<p>缺点: 递归调用浪费了空间，而且递归太深容易造成堆栈的溢出。</p>
</li>
<li><p>迭代的</p>
<p>优点: 就是代码运行效率好，因为时间只因循环次数增加而增加，而且没有额外的空间开销。 缺点: 就是代码不如递归简洁</p>
</li>
</ul>
<h2 id="56-详细说一下你对-cookie、session、token-的理解"><a href="#56-详细说一下你对-cookie、session、token-的理解" class="headerlink" title="56.详细说一下你对 cookie、session、token 的理解"></a>56.详细说一下你对 cookie、session、token 的理解</h2><ul>
<li>cookie由服务器生成，发送给浏览器，浏览器把cookie以kv形式保存到某个目录下的文本文件内，下一次请求同网站时会把该cookie发送给服务器。由于cookie是存在客户端上的，所以浏览器加入了一些限制确保cookie不会被恶意使用，同时不会占据太多磁盘空间，所以每个域的cookie数量是有限的。</li>
<li>session 从字面上讲，就是会话。这个就类似于你和一个人交谈，你怎么知道当前和你交谈的是张三而不是李四呢？对方肯定有某种特征（长相等）表明他就是张三。session 也是类似的道理，服务器要知道当前发请求给自己的是谁。为了做这种区分，服务器就要给每个客户端分配不同的“身份标识”，然后客户端每次向服务器发请求的时候，都带上这个“身份标识”，服务器就知道这个请求来自于谁了。至于客户端怎么保存这个“身份标识”，可以有很多种方式，对于浏览器客户端，一般都默认采用cookie的方式。服务器使用 session 把用户的信息临时保存在了服务器上，用户离开网站后session会被销毁。这种用户信息存储方式相对cookie来说更安全，可是session有一个缺陷：如果web服务器做了负载均衡，那么下一个操作请求到了另一台服务器的时候session会丢失。</li>
<li>在web领域基于token的身份验证随处可见。在大多数使用web api的互联网公司中，token是多用户下处理认证的最佳方式。基于token的身份验证是无状态的，我们不将用户信息存在服务器或session中。这种概念解决了在服务端存储信息时的许多问题。</li>
</ul>
<h2 id="57-说一下-在-map-中和-for-中调用异步函数的区别"><a href="#57-说一下-在-map-中和-for-中调用异步函数的区别" class="headerlink" title="57.说一下 在 map 中和 for 中调用异步函数的区别"></a>57.说一下 在 map 中和 for 中调用异步函数的区别</h2><p>区别：</p>
<ul>
<li>map会先把执行同步操作执行完，就返回，之后再一次一次的执行异步任务</li>
<li>for是等待异步返回结果后再进入下一次循环</li>
</ul>
<p>map函数的原理：</p>
<ul>
<li>循环数组，把数组每一项的值，传给回调函数</li>
<li>将回调函数处理后的结果push到一个新的数组</li>
<li>返回新数组</li>
<li>map函数函数是同步执行的，循环每一项时，到给新数组值都是同步操作。</li>
</ul>
<h2 id="58-实现个函数柯里化"><a href="#58-实现个函数柯里化" class="headerlink" title="58.实现个函数柯里化"></a>58.实现个函数柯里化</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">// function curry(func) &#123;</span><br><span class="line">//   //此处补全</span><br><span class="line">// &#125;</span><br><span class="line">// function sum(...args) &#123;</span><br><span class="line">//   return args.reduce((a, b) =&gt; a + b)</span><br><span class="line">// &#125;</span><br><span class="line"></span><br><span class="line">// let curriedSum = curry(sum);</span><br><span class="line"></span><br><span class="line">// alert(curriedSum(1, 2, 3)()); // 6</span><br><span class="line">// alert(curriedSum(1)(2, 3, 4)()); // 10</span><br><span class="line">// alert(curriedSum(1)(2)()); // 3</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>答案：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">sum</span> (...args) &#123;</span><br><span class="line">  <span class="keyword">return</span> args.<span class="title function_">reduce</span>(<span class="function">(<span class="params">a, b</span>) =&gt;</span> a + b)</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">currying</span> (fn) &#123;</span><br><span class="line">  <span class="keyword">let</span> args = []</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">function</span> <span class="title function_">temp</span> (...newArgs) &#123;</span><br><span class="line">      <span class="keyword">if</span> (newArgs.<span class="property">length</span>) &#123;</span><br><span class="line">          args = [</span><br><span class="line">              ...args,</span><br><span class="line">              ...newArgs</span><br><span class="line">          ]</span><br><span class="line">          <span class="keyword">return</span> temp</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">          <span class="keyword">let</span> val = fn.<span class="title function_">apply</span>(<span class="variable language_">this</span>, args)</span><br><span class="line">          args = [] </span><br><span class="line">          <span class="keyword">return</span> val </span><br><span class="line">      &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> curriedSum = <span class="title function_">currying</span>(sum)</span><br></pre></td></tr></table></figure>

<h1 id="2021-11-17"><a href="#2021-11-17" class="headerlink" title="2021.11.17"></a>2021.11.17</h1><h2 id="59-object、map和weakMap的区别"><a href="#59-object、map和weakMap的区别" class="headerlink" title="59.object、map和weakMap的区别"></a>59.object、map和weakMap的区别</h2><ul>
<li>object有默认的一些键，键只能是string。</li>
<li>map的键则可以是各种类型包括引用类型，map提供了很多api对map中的键值对进行操作比如get，set，delete，has，clear，相比较object更方便，针对频繁删改键值的操作，性能更好，</li>
<li>weakmap则类似map，但weakmap是弱引用，]不增加引用计数器的值，只要其他地方没有再引用weakmap中的引用类型值，那么垃圾回收就会回收掉那个空间。</li>
</ul>
<h2 id="60-async原理"><a href="#60-async原理" class="headerlink" title="60.async原理"></a>60.async原理</h2><p>async 是generator的语法糖，aync封装了generator 让yeild执行变为手动执行，async会将函数返回值为promise.</p>
<h2 id="61-你对于堆与栈的理解"><a href="#61-你对于堆与栈的理解" class="headerlink" title="61.你对于堆与栈的理解"></a>61.你对于堆与栈的理解</h2><p>（一）这些数据可以分为原始数据类型和引用数据类型：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">栈：原始数据类型（Undefined、Null、Boolean、Number、String）</span><br><span class="line">堆：引用数据类型（对象、数组和函数）</span><br></pre></td></tr></table></figure>

<p>（二）两种类型的区别在于存储位置的不同：</p>
<ul>
<li>原始数据类型直接存储在栈（stack）中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；栈存的是基本类型和引用类型的指针，存在栈中存的数据会被频繁操作提高性能；栈是由操作系统自动分配释放的，存档函数的参数值和局部变量的值等。操作方式就类似数据结构的栈。堆由人工分配释放，或者运行结束os回收，类似于链表</li>
<li>引用数据类型存储在堆（heap）中的对象，占据空间大、大小不固定。如果存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。</li>
</ul>
<p>（三）堆和栈的概念存在于数据结构和操作系统内存中，在数据结构中：</p>
<ul>
<li>在数据结构中，栈中数据的存取方式为先进后出。堆是一个优先队列，是按优先级来进行排序的，优先级可以按照大小来规定。</li>
<li>在操作系统中，内存被分为栈区和堆区：栈区内存由编译器自动分配释放，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈。堆区内存一般由开发着分配释放，若开发者不释放，程序结束时可能由垃圾回收机制回收。</li>
</ul>
<h2 id="62-sort的底层原理"><a href="#62-sort的底层原理" class="headerlink" title="62.sort的底层原理"></a>62.sort的底层原理</h2><ul>
<li>V8 引擎 sort 函数只给出了两种排序分别是：根据传入的数组大小判断使用 数组长度小于等于 10 的用插入排序，比10大的数组则使用快速排序</li>
<li>如果还要按引擎区分的话 v8就是上面说的这个，ff用的归并排序，webkit用的C++库的排序</li>
</ul>
<h2 id="63-前端路由模式及其原理"><a href="#63-前端路由模式及其原理" class="headerlink" title="63.前端路由模式及其原理"></a>63.前端路由模式及其原理</h2><p>路由是为了需要路径被改变而页面不会重新请求刷新，路由模式有hash和history还有repleaceState，hash就是利用hashchange不会重新请求这个原理，window.addEventListener(‘hashchange’,function() {&#x2F;&#x2F;改变视图})，history同理，只不过history模式下路径不会有#</p>
<ul>
<li>push是往history去添加一条记录</li>
<li>repleaceState是替换路径</li>
<li>replace直接替换，不会添加新的；push和replace区别就是push能返回上一页replace不能</li>
</ul>
<hr>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">Author: </span><span class="post-copyright-info"><a href="https://szhihao.gitee.io">孙志豪</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">Link: </span><span class="post-copyright-info"><a href="https://szhihao.gitee.io/2022/10/11/03-%E5%89%8D%E7%AB%AF%EF%BC%88%E6%A0%B8%E5%BF%83%E9%9D%A2%E8%AF%95%E9%A2%98%EF%BC%89/%E5%89%8D%E7%AB%AF%E6%80%BB%E7%BB%93%E7%9A%84%E4%B8%80%E4%BA%9B%E9%97%AE%E9%A2%98/">https://szhihao.gitee.io/2022/10/11/03-%E5%89%8D%E7%AB%AF%EF%BC%88%E6%A0%B8%E5%BF%83%E9%9D%A2%E8%AF%95%E9%A2%98%EF%BC%89/%E5%89%8D%E7%AB%AF%E6%80%BB%E7%BB%93%E7%9A%84%E4%B8%80%E4%BA%9B%E9%97%AE%E9%A2%98/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">Copyright Notice: </span><span class="post-copyright-info">All articles in this blog are licensed under <a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a> unless stating additionally.</span></div></div><div class="tag_share"><div class="post-meta__tag-list"></div><div class="post_share"><div class="social-share" data-image="/img/%E5%A4%A9%E7%A9%BA.jpeg" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/2022/10/11/14-%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6%EF%BC%88Vue%E9%9D%A2%E8%AF%95%E9%A2%98%EF%BC%89/vue%E4%B8%93%E4%B8%9A%E9%9D%A2%E8%AF%95%E9%A2%98/"><img class="prev-cover" src= "" data-lazy-src="/img/%E5%A4%A9%E7%A9%BA.jpeg" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">Previous Post</div><div class="prev_info">vue专业面试题</div></div></a></div><div class="next-post pull-right"><a href="/2022/10/11/14-%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6%EF%BC%88Vue%E9%9D%A2%E8%AF%95%E9%A2%98%EF%BC%89/%E6%9C%80%E5%85%A8%E7%9A%84%20Vue%20%E9%9D%A2%E8%AF%95%E9%A2%98+%E8%AF%A6%E8%A7%A3%E7%AD%94%E6%A1%88/"><img class="next-cover" src= "" data-lazy-src="/img/%E5%A4%A9%E7%A9%BA.jpeg" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">Next Post</div><div class="next_info">最全的 Vue 面试题+详解答案</div></div></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src= "" data-lazy-src="/img/%E5%A4%B4%E5%83%8F.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">孙志豪</div><div class="author-info__description">吾日三省吾身：为人谋而不忠乎？与朋友交而不信乎？传不习乎？</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">Articles</div><div class="length-num">44</div></a><a href="/tags/"><div class="headline">Tags</div><div class="length-num">1</div></a><a href="/categories/"><div class="headline">Categories</div><div class="length-num">15</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://gitee.com/szhihao/szhihao"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://gitee.com/szhihao/szhihao" target="_blank" title="Gitee"><i class="fab fa-github"></i></a><a class="social-icon" href="https://blog.csdn.net/qq_54753561" target="_blank" title="CSDN"><i class="fa fa-book-open"></i></a><a class="social-icon" href="mailto:zhihaomail@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>Announcement</span></div><div class="announcement_content">This is my Blog</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>Catalog</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%89%8D%E7%AB%AF%E6%80%BB%E7%BB%93%E7%9A%84%E4%B8%80%E4%BA%9B%E9%97%AE%E9%A2%98"><span class="toc-number">1.</span> <span class="toc-text">前端总结的一些问题</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-flex-1-%E4%BB%A3%E8%A1%A8%E4%BA%86%E4%BB%80%E4%B9%88%E6%84%8F%E6%80%9D"><span class="toc-number">1.1.</span> <span class="toc-text">1.flex:1 代表了什么意思</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E5%8D%95%E8%A1%8C%E6%96%87%E6%9C%AC%E6%BA%A2%E5%87%BA%E7%9C%81%E7%95%A5%E5%8F%B7%E5%92%8C%E4%B8%80%E4%B8%AA%E5%90%91%E4%B8%8B%E7%9A%84%E4%B8%89%E8%A7%92%E5%BD%A2%E7%9A%84css%E6%80%8E%E4%B9%88%E5%86%99"><span class="toc-number">1.2.</span> <span class="toc-text">2.单行文本溢出省略号和一个向下的三角形的css怎么写</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-flex%E5%B8%83%E5%B1%80%E6%9C%89%E5%93%AA%E4%BA%9B%E5%B8%B8%E7%94%A8%E5%B1%9E%E6%80%A7%EF%BC%9F"><span class="toc-number">1.3.</span> <span class="toc-text">3.flex布局有哪些常用属性？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-css%E5%A6%82%E4%BD%95%E5%BC%80%E5%90%AF%E7%A1%AC%E4%BB%B6%E5%8A%A0%E9%80%9F"><span class="toc-number">1.4.</span> <span class="toc-text">4.css如何开启硬件加速</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-%E5%A6%82%E4%BD%95%E5%9C%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E7%94%BB%E5%87%BA%E4%B8%80%E4%B8%AA%E6%AD%A3%E6%96%B9%E5%BD%A2%E5%B9%B6%E4%BF%9D%E8%AF%81%E8%BF%99%E4%B8%AA%E6%AD%A3%E6%96%B9%E5%BD%A2%E6%98%AF%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8F%AF%E8%A7%86%E5%8C%BA%E6%9C%80%E5%A4%A7%E7%9A%84"><span class="toc-number">1.5.</span> <span class="toc-text">5.如何在浏览器画出一个正方形并保证这个正方形是浏览器可视区最大的?</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#2021-11-1"><span class="toc-number">2.</span> <span class="toc-text">2021.11.1</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#6-%E6%95%B0%E6%8D%AE%E6%A3%80%E6%B5%8B%E7%9A%84%E6%96%B9%E6%B3%95%E6%9C%89%E5%93%AA%E4%BA%9B"><span class="toc-number">2.1.</span> <span class="toc-text">6.数据检测的方法有哪些</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0bind"><span class="toc-number">2.2.</span> <span class="toc-text">7.如何实现bind</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#8-mouseover%E5%92%8Cmouseenter%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">2.3.</span> <span class="toc-text">8.mouseover和mouseenter的区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#9-JS%E5%9E%83%E5%9C%BE%E5%9B%9E%E6%94%B6%E6%9C%BA%E5%88%B6"><span class="toc-number">2.4.</span> <span class="toc-text">9.JS垃圾回收机制</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#2021-11-2"><span class="toc-number">3.</span> <span class="toc-text">2021.11.2</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#10-%E7%BB%84%E5%90%88%E7%BB%A7%E6%89%BF%E7%9A%84%E7%BC%BA%E7%82%B9%EF%BC%8C%E5%AF%84%E7%94%9F%E7%BB%A7%E6%89%BF%E7%9A%84%E7%BC%BA%E7%82%B9"><span class="toc-number">3.1.</span> <span class="toc-text">10.组合继承的缺点，寄生继承的缺点</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#11-function%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E5%92%8CClass%E7%9A%84%E5%B7%AE%E5%88%AB"><span class="toc-number">3.2.</span> <span class="toc-text">11.function构造函数和Class的差别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#12-%E6%80%8E%E4%B9%88%E8%AE%A1%E7%AE%97%E5%85%83%E7%B4%A0ele%E5%88%B0%E6%B5%8F%E8%A7%88%E5%99%A8%E8%A7%86%E5%8F%A3%E9%A1%B6%E9%83%A8%E7%9A%84%E8%B7%9D%E7%A6%BB"><span class="toc-number">3.3.</span> <span class="toc-text">12.怎么计算元素ele到浏览器视口顶部的距离</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#13-%E8%AF%B4%E8%AF%B4prop%E5%92%8Cattribute%E7%9A%84%E5%B7%AE%E5%88%AB"><span class="toc-number">3.4.</span> <span class="toc-text">13.说说prop和attribute的差别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#14-%E4%BA%8B%E4%BB%B6%E5%86%92%E6%B3%A1%E5%92%8C%E6%8D%95%E8%8E%B7%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9F"><span class="toc-number">3.5.</span> <span class="toc-text">14.事件冒泡和捕获的区别？</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#2021-11-3"><span class="toc-number">4.</span> <span class="toc-text">2021.11.3</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#15-Cookie%E6%9C%89%E5%93%AA%E4%BA%9B%E5%B1%9E%E6%80%A7"><span class="toc-number">4.1.</span> <span class="toc-text">15. Cookie有哪些属性?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#16-%E8%AF%B4%E6%98%8EEventTarget-addEventListener-%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0"><span class="toc-number">4.2.</span> <span class="toc-text">16. 说明EventTarget.addEventListener() 的第三个参数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#17-Object-freeze-%E6%98%AF%E5%81%9A%E4%BB%80%E4%B9%88%E7%94%A8%E7%9A%84%EF%BC%8C%E6%9C%89%E5%93%AA%E4%BA%9B%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF"><span class="toc-number">4.3.</span> <span class="toc-text">17. Object.freeze() 是做什么用的，有哪些应用场景</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#18-%E7%82%B9%E5%87%BB%E7%A7%BB%E5%8A%A8%E7%AB%AF%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E5%89%8D%E8%BF%9B%E6%8C%89%E9%92%AE%E6%88%96%E5%90%8E%E9%80%80%E6%8C%89%E9%92%AE%EF%BC%8C%E5%BE%80%E8%BF%94%E9%A1%B5%E9%9D%A2%E4%B8%8D%E5%88%B7%E6%96%B0%EF%BC%8C%E5%8F%AF%E4%BB%A5%E5%A6%82%E4%BD%95%E8%A7%A3%E5%86%B3"><span class="toc-number">4.4.</span> <span class="toc-text">18. 点击移动端浏览器的前进按钮或后退按钮，往返页面不刷新，可以如何解决</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#2021-11-4"><span class="toc-number">5.</span> <span class="toc-text">2021.11.4</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#19-new%E5%81%9A%E4%BA%86%E4%BB%80%E4%B9%88"><span class="toc-number">5.1.</span> <span class="toc-text">19. new做了什么</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#20-%E9%80%9A%E8%BF%87%E5%8E%9F%E5%9E%8B%E5%AE%9E%E7%8E%B0%E7%9A%84%E7%BB%A7%E6%89%BF%E5%92%8C%E7%B1%BB%E7%BB%A7%E6%89%BF%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB"><span class="toc-number">5.2.</span> <span class="toc-text">20.通过原型实现的继承和类继承有什么区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#21-window-onload%E5%92%8Cdomcontentloaded%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">5.3.</span> <span class="toc-text">21. window.onload和domcontentloaded的区别</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#2021-11-5"><span class="toc-number">6.</span> <span class="toc-text">2021.11.5</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#22-%E4%BB%80%E4%B9%88%E6%98%AFBFC-%E5%A6%82%E4%BD%95%E5%BD%A2%E6%88%90BFC"><span class="toc-number">6.1.</span> <span class="toc-text">22.什么是BFC,如何形成BFC</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#23-%E4%BD%A0%E7%9F%A5%E9%81%93%E7%9A%84%E6%B5%85%E6%8B%B7%E8%B4%9D%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F"><span class="toc-number">6.2.</span> <span class="toc-text">23.你知道的浅拷贝有哪些？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#24-%E8%AF%B4%E8%AF%B4Object-assign%E5%92%8C%E6%89%A9%E5%B1%95%E8%BF%90%E7%AE%97%E7%AC%A6%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">6.3.</span> <span class="toc-text">24.说说Object.assign和扩展运算符的区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#25-%E4%BD%A0%E7%9F%A5%E9%81%93%E7%9A%84%E6%B7%B1%E6%8B%B7%E8%B4%9D%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F-%E8%AE%A9%E4%BD%A0%E5%AE%9E%E7%8E%B0%EF%BC%8C%E4%BD%A0%E4%BC%9A%E6%80%8E%E4%B9%88%E8%AE%BE%E8%AE%A1"><span class="toc-number">6.4.</span> <span class="toc-text">25.你知道的深拷贝有哪些？(让你实现，你会怎么设计)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#26-Promise%E6%89%A7%E8%A1%8C%E8%BF%87%E7%A8%8B%E4%B8%AD%E5%8F%AF%E4%BB%A5%E4%B8%AD%E6%96%AD%E5%90%97%EF%BC%9F%E8%8B%A5%E6%83%B3%E4%B8%AD%E6%96%AD%EF%BC%8C%E6%80%8E%E4%B9%88%E5%AF%B9%E5%85%B6%E8%BF%9B%E8%A1%8C%E4%B8%AD%E6%96%AD%E3%80%82"><span class="toc-number">6.5.</span> <span class="toc-text">26.Promise执行过程中可以中断吗？若想中断，怎么对其进行中断。</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#2021-11-8"><span class="toc-number">7.</span> <span class="toc-text">2021.11.8</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#27-event-loop-%E6%89%A7%E8%A1%8C%E8%BF%87%E7%A8%8B"><span class="toc-number">7.1.</span> <span class="toc-text">27.event loop 执行过程</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#28-%E6%95%B0%E7%BB%84%E5%8E%BB%E9%87%8D%E7%9A%84%E6%96%B9%E5%BC%8F"><span class="toc-number">7.2.</span> <span class="toc-text">28.数组去重的方式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#29-set%E5%92%8Cmap%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">7.3.</span> <span class="toc-text">29.set和map的区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#30-%E4%BB%8B%E7%BB%8D%E4%B8%80%E4%B8%8Bes6%E7%9A%84symbol"><span class="toc-number">7.4.</span> <span class="toc-text">30.介绍一下es6的symbol</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#2021-11-9"><span class="toc-number">8.</span> <span class="toc-text">2021.11.9</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#31-%E5%B8%B8%E8%A7%81%E7%9A%84DOM%E6%93%8D%E4%BD%9C%E6%9C%89%E5%93%AA%E4%BA%9B"><span class="toc-number">8.1.</span> <span class="toc-text">31.常见的DOM操作有哪些</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#32-%E6%95%B0%E7%BB%84%E6%9C%89%E5%93%AA%E4%BA%9B%E5%8E%9F%E7%94%9F%E6%96%B9%E6%B3%95%EF%BC%9F"><span class="toc-number">8.2.</span> <span class="toc-text">32.数组有哪些原生方法？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#33-%E9%87%8D%E7%BB%98%E5%92%8C%E5%9B%9E%E6%B5%81"><span class="toc-number">8.3.</span> <span class="toc-text">33.重绘和回流</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#34-%E5%8D%8F%E5%95%86%E7%BC%93%E5%AD%98%E5%92%8C%E5%BC%BA%E7%BC%93%E5%AD%98%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">8.4.</span> <span class="toc-text">34.协商缓存和强缓存的区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#35-%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E6%B8%B2%E6%9F%93%E8%BF%87%E7%A8%8B"><span class="toc-number">8.5.</span> <span class="toc-text">35.浏览器的渲染过程</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#2021-11-10"><span class="toc-number">9.</span> <span class="toc-text">2021.11.10</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#36-%E4%BC%AA%E5%85%83%E7%B4%A0%E5%92%8C%E4%BC%AA%E7%B1%BB%E7%9A%84%E5%8C%BA%E5%88%AB%E5%92%8C%E4%BD%9C%E7%94%A8%EF%BC%9F"><span class="toc-number">9.1.</span> <span class="toc-text">36.伪元素和伪类的区别和作用？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#37-this-%E7%9A%84%E6%8C%87%E5%90%91"><span class="toc-number">9.2.</span> <span class="toc-text">37.this 的指向</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#38-https-%E5%8A%A0%E5%AF%86%E8%BF%87%E7%A8%8B"><span class="toc-number">9.3.</span> <span class="toc-text">38.https 加密过程</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#39-%E6%9F%AF%E9%87%8C%E5%8C%96%E7%9A%84%E5%AE%9A%E4%B9%89%E5%92%8C%E5%AE%9E%E7%8E%B0"><span class="toc-number">9.4.</span> <span class="toc-text">39.柯里化的定义和实现</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#40-%E4%BB%80%E4%B9%88%E6%98%AF-JavaScript-%E7%94%9F%E6%88%90%E5%99%A8%EF%BC%9F%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%E7%94%9F%E6%88%90%E5%99%A8%EF%BC%9F"><span class="toc-number">9.5.</span> <span class="toc-text">40.什么是 JavaScript 生成器？如何使用生成器？</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#2021-11-11"><span class="toc-number">10.</span> <span class="toc-text">2021.11.11</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#41-%E4%BD%A0%E7%9F%A5%E9%81%93%E5%93%AA%E4%BA%9B%E6%94%BB%E5%87%BB%E7%B1%BB%E5%9E%8B%EF%BC%9F"><span class="toc-number">10.1.</span> <span class="toc-text">41.你知道哪些攻击类型？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#42-%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0-countFn%EF%BC%8C%E6%8E%A5%E6%94%B6%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0%E4%BD%9C%E4%B8%BA%E5%8F%82%E6%95%B0%EF%BC%8C%E8%BF%94%E5%9B%9E%E4%B8%80%E4%B8%AA%E6%96%B0%E5%87%BD%E6%95%B0%EF%BC%8C%E5%85%B7%E5%A4%87%E8%B0%83%E7%94%A8%E8%AE%A1%E6%95%B0%E5%8A%9F%E8%83%BD"><span class="toc-number">10.2.</span> <span class="toc-text">42.实现一个函数 countFn，接收一个函数作为参数，返回一个新函数，具备调用计数功能</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#43-Object-create-null-%E5%92%8C%E7%9B%B4%E6%8E%A5%E7%94%A8%E5%AD%97%E9%9D%A2%E9%87%8F-%E5%88%9B%E5%BB%BA%E7%A9%BA%E5%AF%B9%E8%B1%A1%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB%E5%92%8C%E5%A5%BD%E5%A4%84%E5%90%97"><span class="toc-number">10.3.</span> <span class="toc-text">43.Object.create(null) 和直接用字面量{}创建空对象有什么区别和好处吗</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#44-%E6%89%8B%E5%86%99Promise-then%E5%A6%82%E4%BD%95%E4%BF%9D%E8%AF%81%E5%90%8E%E4%B8%80%E4%B8%AAthen%E9%87%8C%E7%9A%84%E6%96%B9%E6%B3%95%E5%9C%A8%E5%89%8D%E4%B8%80%E4%B8%AAthen%E7%BB%93%E6%9D%9F%E4%B9%8B%E5%90%8E%E5%86%8D%E6%89%A7%E8%A1%8C%EF%BC%9F"><span class="toc-number">10.4.</span> <span class="toc-text">44.手写Promise.then如何保证后一个then里的方法在前一个then结束之后再执行？</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#2021-11-12"><span class="toc-number">11.</span> <span class="toc-text">2021.11.12</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#45-%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%E4%BB%A3%E7%A0%81%E8%BE%93%E5%87%BA%E9%A2%98"><span class="toc-number">11.1.</span> <span class="toc-text">45.事件循环代码输出题</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#46-%E7%B1%BB%E5%9E%8B%E5%8F%98%E6%8D%A2%E4%BB%A3%E7%A0%81%E8%BE%93%E5%87%BA%E9%A2%98"><span class="toc-number">11.2.</span> <span class="toc-text">46.类型变换代码输出题</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#47-%E4%BD%9C%E7%94%A8%E5%9F%9F%E7%9B%B8%E5%85%B3%E4%BB%A3%E7%A0%81%E8%BE%93%E5%87%BA%E9%A2%98"><span class="toc-number">11.3.</span> <span class="toc-text">47.作用域相关代码输出题</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#48-%E9%97%AD%E5%8C%85%E4%BB%A3%E7%A0%81%E8%BE%93%E5%87%BA%E9%A2%98"><span class="toc-number">11.4.</span> <span class="toc-text">48.闭包代码输出题</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#2021-11-15"><span class="toc-number">12.</span> <span class="toc-text">2021.11.15</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#49-TCP%E6%98%AF%E5%A6%82%E4%BD%95%E4%BF%9D%E6%8C%81%E5%8F%AF%E9%9D%A0%E7%9A%84%EF%BC%9F"><span class="toc-number">12.1.</span> <span class="toc-text">49.TCP是如何保持可靠的？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#50-%E5%90%8E%E7%AB%AF%E4%B8%80%E6%AC%A1%E6%80%A7%E7%BB%99%E5%87%BA%E5%87%A0%E4%B8%87%E6%9D%A1%E6%95%B0%E6%8D%AE%E8%AF%A5%E6%80%8E%E4%B9%88%E6%B8%B2%E6%9F%93-%EF%BC%9F"><span class="toc-number">12.2.</span> <span class="toc-text">50.后端一次性给出几万条数据该怎么渲染 ？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#51-%E5%89%8D%E7%AB%AF%E7%9A%84%E4%B8%80%E6%AC%A1%E8%AF%B7%E6%B1%82%E4%BC%9A%E7%BB%8F%E8%BF%87%E5%93%AA%E4%BA%9B%E7%BC%93%E5%AD%98%EF%BC%9F"><span class="toc-number">12.3.</span> <span class="toc-text">51.前端的一次请求会经过哪些缓存？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#52-promise%E5%92%8Casync-await%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">12.4.</span> <span class="toc-text">52.promise和async await的区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#53-%E7%AE%97%E6%B3%95%E9%A2%98%EF%BC%9A%E4%B8%8D%E5%90%8C%E8%B7%AF%E5%BE%84%EF%BC%88%E5%8A%A8%E6%80%81%E8%A7%84%E5%88%92%EF%BC%89"><span class="toc-number">12.5.</span> <span class="toc-text">53.算法题：不同路径（动态规划）</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#2021-11-16"><span class="toc-number">13.</span> <span class="toc-text">2021.11.16</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#54-%E8%AF%B4%E4%B8%80%E4%B8%8B-js-%E4%B8%A5%E6%A0%BC%E6%A8%A1%E5%BC%8F%E4%B8%8B%E6%9C%89%E5%93%AA%E4%BA%9B%E4%B8%8D%E5%90%8C"><span class="toc-number">13.1.</span> <span class="toc-text">54.说一下 js 严格模式下有哪些不同</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#55-%E8%AF%B4%E4%B8%80%E4%B8%8B%E9%80%92%E5%BD%92%E5%92%8C%E8%BF%AD%E4%BB%A3%E7%9A%84%E5%8C%BA%E5%88%AB%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%8C%E5%90%84%E6%9C%89%E4%BB%80%E4%B9%88%E4%BC%98%E7%BC%BA%E7%82%B9%EF%BC%9F"><span class="toc-number">13.2.</span> <span class="toc-text">55.说一下递归和迭代的区别是什么，各有什么优缺点？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#56-%E8%AF%A6%E7%BB%86%E8%AF%B4%E4%B8%80%E4%B8%8B%E4%BD%A0%E5%AF%B9-cookie%E3%80%81session%E3%80%81token-%E7%9A%84%E7%90%86%E8%A7%A3"><span class="toc-number">13.3.</span> <span class="toc-text">56.详细说一下你对 cookie、session、token 的理解</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#57-%E8%AF%B4%E4%B8%80%E4%B8%8B-%E5%9C%A8-map-%E4%B8%AD%E5%92%8C-for-%E4%B8%AD%E8%B0%83%E7%94%A8%E5%BC%82%E6%AD%A5%E5%87%BD%E6%95%B0%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">13.4.</span> <span class="toc-text">57.说一下 在 map 中和 for 中调用异步函数的区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#58-%E5%AE%9E%E7%8E%B0%E4%B8%AA%E5%87%BD%E6%95%B0%E6%9F%AF%E9%87%8C%E5%8C%96"><span class="toc-number">13.5.</span> <span class="toc-text">58.实现个函数柯里化</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#2021-11-17"><span class="toc-number">14.</span> <span class="toc-text">2021.11.17</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#59-object%E3%80%81map%E5%92%8CweakMap%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">14.1.</span> <span class="toc-text">59.object、map和weakMap的区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#60-async%E5%8E%9F%E7%90%86"><span class="toc-number">14.2.</span> <span class="toc-text">60.async原理</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#61-%E4%BD%A0%E5%AF%B9%E4%BA%8E%E5%A0%86%E4%B8%8E%E6%A0%88%E7%9A%84%E7%90%86%E8%A7%A3"><span class="toc-number">14.3.</span> <span class="toc-text">61.你对于堆与栈的理解</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#62-sort%E7%9A%84%E5%BA%95%E5%B1%82%E5%8E%9F%E7%90%86"><span class="toc-number">14.4.</span> <span class="toc-text">62.sort的底层原理</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#63-%E5%89%8D%E7%AB%AF%E8%B7%AF%E7%94%B1%E6%A8%A1%E5%BC%8F%E5%8F%8A%E5%85%B6%E5%8E%9F%E7%90%86"><span class="toc-number">14.5.</span> <span class="toc-text">63.前端路由模式及其原理</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>Recent Post</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/2022/10/12/04-%E5%89%8D%E7%AB%AF%EF%BC%88%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E7%AF%87%EF%BC%89/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E7%AF%87/" title="性能优化面试题"><img src= "" data-lazy-src="/img/%E5%A4%A9%E7%A9%BA.jpeg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="性能优化面试题"/></a><div class="content"><a class="title" href="/2022/10/12/04-%E5%89%8D%E7%AB%AF%EF%BC%88%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E7%AF%87%EF%BC%89/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E7%AF%87/" title="性能优化面试题">性能优化面试题</a><time datetime="2022-10-12T12:01:36.000Z" title="Created 2022-10-12 20:01:36">2022-10-12</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2022/10/11/05-%E6%A0%B8%E5%BF%83js%EF%BC%88%E6%96%B9%E6%B3%95%E5%AE%B6%E8%A7%84%EF%BC%89/JS%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%96%B9%E6%B3%95%E2%80%94%E2%80%94%E9%80%9F%E8%AE%B0%E5%B0%8F%E6%9C%AC%E5%AD%90/" title="JS字符串方法"><img src= "" data-lazy-src="/img/%E5%A4%A9%E7%A9%BA.jpeg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="JS字符串方法"/></a><div class="content"><a class="title" href="/2022/10/11/05-%E6%A0%B8%E5%BF%83js%EF%BC%88%E6%96%B9%E6%B3%95%E5%AE%B6%E8%A7%84%EF%BC%89/JS%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%96%B9%E6%B3%95%E2%80%94%E2%80%94%E9%80%9F%E8%AE%B0%E5%B0%8F%E6%9C%AC%E5%AD%90/" title="JS字符串方法">JS字符串方法</a><time datetime="2022-10-11T12:01:36.000Z" title="Created 2022-10-11 20:01:36">2022-10-11</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2022/10/11/05-%E6%A0%B8%E5%BF%83js%EF%BC%88%E6%96%B9%E6%B3%95%E5%AE%B6%E8%A7%84%EF%BC%89/JS%E5%AF%B9%E8%B1%A1%E6%96%B9%E6%B3%95%E2%80%94%E2%80%94%E9%80%9F%E8%AE%B0%E5%B0%8F%E6%9C%AC%E5%AD%90/" title="JS对象方法"><img src= "" data-lazy-src="/img/%E5%A4%A9%E7%A9%BA.jpeg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="JS对象方法"/></a><div class="content"><a class="title" href="/2022/10/11/05-%E6%A0%B8%E5%BF%83js%EF%BC%88%E6%96%B9%E6%B3%95%E5%AE%B6%E8%A7%84%EF%BC%89/JS%E5%AF%B9%E8%B1%A1%E6%96%B9%E6%B3%95%E2%80%94%E2%80%94%E9%80%9F%E8%AE%B0%E5%B0%8F%E6%9C%AC%E5%AD%90/" title="JS对象方法">JS对象方法</a><time datetime="2022-10-11T12:01:36.000Z" title="Created 2022-10-11 20:01:36">2022-10-11</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2022/10/11/05-%E6%A0%B8%E5%BF%83js%EF%BC%88%E6%96%B9%E6%B3%95%E5%AE%B6%E8%A7%84%EF%BC%89/JS%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E2%80%94%E2%80%94%E9%80%9F%E6%9F%A5%E5%B0%8F%E6%9C%AC%E5%AD%90/" title="JS数组方法"><img src= "" data-lazy-src="/img/%E5%A4%A9%E7%A9%BA.jpeg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="JS数组方法"/></a><div class="content"><a class="title" href="/2022/10/11/05-%E6%A0%B8%E5%BF%83js%EF%BC%88%E6%96%B9%E6%B3%95%E5%AE%B6%E8%A7%84%EF%BC%89/JS%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E2%80%94%E2%80%94%E9%80%9F%E6%9F%A5%E5%B0%8F%E6%9C%AC%E5%AD%90/" title="JS数组方法">JS数组方法</a><time datetime="2022-10-11T12:01:36.000Z" title="Created 2022-10-11 20:01:36">2022-10-11</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2022/10/11/07-%E6%A0%B8%E5%BF%83js%EF%BC%88%E6%89%8B%E5%86%99%E7%AF%87%EF%BC%89/%E5%BC%80%E5%8F%91%E5%B0%81%E8%A3%85%E5%87%BD%E6%95%B0/" title="开发封装函数"><img src= "" data-lazy-src="/img/%E5%A4%A9%E7%A9%BA.jpeg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="开发封装函数"/></a><div class="content"><a class="title" href="/2022/10/11/07-%E6%A0%B8%E5%BF%83js%EF%BC%88%E6%89%8B%E5%86%99%E7%AF%87%EF%BC%89/%E5%BC%80%E5%8F%91%E5%B0%81%E8%A3%85%E5%87%BD%E6%95%B0/" title="开发封装函数">开发封装函数</a><time datetime="2022-10-11T12:01:36.000Z" title="Created 2022-10-11 20:01:36">2022-10-11</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2022 By 孙志豪</div><div class="framework-info"><span>Framework </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>Theme </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="Read Mode"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="Switch Between Light And Dark Mode"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="Toggle between single-column and double-column"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="Setting"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="Table Of Contents"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="Back To Top"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">Search</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  Loading the Database</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="Search for Posts" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="/js/search/local-search.js"></script><div class="js-pjax"></div><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>